<template>
    <div id="icon">
      <div class="card icons-demo">
        <div class="card-header">
          <h2>Web Application</h2>
        </div>

        <div class="card-body card-padding">
          <div class="row">
            <div class="col-sm-4" data-name="3d-rotation" tooltip="f101"><p><i class="zmdi zmdi-3d-rotation zmdi-hc-fw"></i> <span>3d-rotation</span></p></div>

            <div class="col-sm-4" data-name="airplane-off" tooltip="f102"><p><i class="zmdi zmdi-airplane-off zmdi-hc-fw"></i> <span>airplane-off</span></p></div>

            <div class="col-sm-4" data-name="airplane" tooltip="f103"><p><i class="zmdi zmdi-airplane zmdi-hc-fw"></i> <span>airplane</span></p></div>

            <div class="col-sm-4" data-name="album" tooltip="f104"><p><i class="zmdi zmdi-album zmdi-hc-fw"></i> <span>album</span></p></div>

            <div class="col-sm-4" data-name="archive" tooltip="f105"><p><i class="zmdi zmdi-archive zmdi-hc-fw"></i> <span>archive</span></p></div>

            <div class="col-sm-4" data-name="assignment-account" tooltip="f106"><p><i class="zmdi zmdi-assignment-account zmdi-hc-fw"></i> <span>assignment-account</span></p></div>

            <div class="col-sm-4" data-name="assignment-alert" tooltip="f107"><p><i class="zmdi zmdi-assignment-alert zmdi-hc-fw"></i> <span>assignment-alert</span></p></div>

            <div class="col-sm-4" data-name="assignment-check" tooltip="f108"><p><i class="zmdi zmdi-assignment-check zmdi-hc-fw"></i> <span>assignment-check</span></p></div>

            <div class="col-sm-4" data-name="assignment-o" tooltip="f109"><p><i class="zmdi zmdi-assignment-o zmdi-hc-fw"></i> <span>assignment-o</span></p></div>

            <div class="col-sm-4" data-name="assignment-return" tooltip="f10a"><p><i class="zmdi zmdi-assignment-return zmdi-hc-fw"></i> <span>assignment-return</span></p></div>

            <div class="col-sm-4" data-name="assignment-returned" tooltip="f10b"><p><i class="zmdi zmdi-assignment-returned zmdi-hc-fw"></i> <span>assignment-returned</span></p></div>

            <div class="col-sm-4" data-name="assignment" tooltip="f10c"><p><i class="zmdi zmdi-assignment zmdi-hc-fw"></i> <span>assignment</span></p></div>

            <div class="col-sm-4" data-name="attachment-alt" tooltip="f10d"><p><i class="zmdi zmdi-attachment-alt zmdi-hc-fw"></i> <span>attachment-alt</span></p></div>

            <div class="col-sm-4" data-name="attachment" tooltip="f10e"><p><i class="zmdi zmdi-attachment zmdi-hc-fw"></i> <span>attachment</span></p></div>

            <div class="col-sm-4" data-name="audio" tooltip="f10f"><p><i class="zmdi zmdi-audio zmdi-hc-fw"></i> <span>audio</span></p></div>

            <div class="col-sm-4" data-name="badge-check" tooltip="f110"><p><i class="zmdi zmdi-badge-check zmdi-hc-fw"></i> <span>badge-check</span></p></div>

            <div class="col-sm-4" data-name="balance-wallet" tooltip="f111"><p><i class="zmdi zmdi-balance-wallet zmdi-hc-fw"></i> <span>balance-wallet</span></p></div>

            <div class="col-sm-4" data-name="balance" tooltip="f112"><p><i class="zmdi zmdi-balance zmdi-hc-fw"></i> <span>balance</span></p></div>

            <div class="col-sm-4" data-name="battery-alert" tooltip="f113"><p><i class="zmdi zmdi-battery-alert zmdi-hc-fw"></i> <span>battery-alert</span></p></div>

            <div class="col-sm-4" data-name="battery-flash" tooltip="f114"><p><i class="zmdi zmdi-battery-flash zmdi-hc-fw"></i> <span>battery-flash</span></p></div>

            <div class="col-sm-4" data-name="battery-unknown" tooltip="f115"><p><i class="zmdi zmdi-battery-unknown zmdi-hc-fw"></i> <span>battery-unknown</span></p></div>

            <div class="col-sm-4" data-name="battery" tooltip="f116"><p><i class="zmdi zmdi-battery zmdi-hc-fw"></i> <span>battery</span></p></div>

            <div class="col-sm-4" data-name="bike" tooltip="f117"><p><i class="zmdi zmdi-bike zmdi-hc-fw"></i> <span>bike</span></p></div>

            <div class="col-sm-4" data-name="block-alt" tooltip="f118"><p><i class="zmdi zmdi-block-alt zmdi-hc-fw"></i> <span>block-alt</span></p></div>

            <div class="col-sm-4" data-name="block" tooltip="f119"><p><i class="zmdi zmdi-block zmdi-hc-fw"></i> <span>block</span></p></div>

            <div class="col-sm-4" data-name="boat" tooltip="f11a"><p><i class="zmdi zmdi-boat zmdi-hc-fw"></i> <span>boat</span></p></div>

            <div class="col-sm-4" data-name="book-image" tooltip="f11b"><p><i class="zmdi zmdi-book-image zmdi-hc-fw"></i> <span>book-image</span></p></div>

            <div class="col-sm-4" data-name="book" tooltip="f11c"><p><i class="zmdi zmdi-book zmdi-hc-fw"></i> <span>book</span></p></div>

            <div class="col-sm-4" data-name="bookmark-outline" tooltip="f11d"><p><i class="zmdi zmdi-bookmark-outline zmdi-hc-fw"></i> <span>bookmark-outline</span></p></div>

            <div class="col-sm-4" data-name="bookmark" tooltip="f11e"><p><i class="zmdi zmdi-bookmark zmdi-hc-fw"></i> <span>bookmark</span></p></div>

            <div class="col-sm-4" data-name="brush" tooltip="f11f"><p><i class="zmdi zmdi-brush zmdi-hc-fw"></i> <span>brush</span></p></div>

            <div class="col-sm-4" data-name="bug" tooltip="f120"><p><i class="zmdi zmdi-bug zmdi-hc-fw"></i> <span>bug</span></p></div>

            <div class="col-sm-4" data-name="bus" tooltip="f121"><p><i class="zmdi zmdi-bus zmdi-hc-fw"></i> <span>bus</span></p></div>

            <div class="col-sm-4" data-name="cake" tooltip="f122"><p><i class="zmdi zmdi-cake zmdi-hc-fw"></i> <span>cake</span></p></div>

            <div class="col-sm-4" data-name="car-taxi" tooltip="f123"><p><i class="zmdi zmdi-car-taxi zmdi-hc-fw"></i> <span>car-taxi</span></p></div>

            <div class="col-sm-4" data-name="car-wash" tooltip="f124"><p><i class="zmdi zmdi-car-wash zmdi-hc-fw"></i> <span>car-wash</span></p></div>

            <div class="col-sm-4" data-name="car" tooltip="f125"><p><i class="zmdi zmdi-car zmdi-hc-fw"></i> <span>car</span></p></div>

            <div class="col-sm-4" data-name="card-giftcard" tooltip="f126"><p><i class="zmdi zmdi-card-giftcard zmdi-hc-fw"></i> <span>card-giftcard</span></p></div>

            <div class="col-sm-4" data-name="card-membership" tooltip="f127"><p><i class="zmdi zmdi-card-membership zmdi-hc-fw"></i> <span>card-membership</span></p></div>

            <div class="col-sm-4" data-name="card-travel" tooltip="f128"><p><i class="zmdi zmdi-card-travel zmdi-hc-fw"></i> <span>card-travel</span></p></div>

            <div class="col-sm-4" data-name="card" tooltip="f129"><p><i class="zmdi zmdi-card zmdi-hc-fw"></i> <span>card</span></p></div>

            <div class="col-sm-4" data-name="case-check" tooltip="f12a"><p><i class="zmdi zmdi-case-check zmdi-hc-fw"></i> <span>case-check</span></p></div>

            <div class="col-sm-4" data-name="case-download" tooltip="f12b"><p><i class="zmdi zmdi-case-download zmdi-hc-fw"></i> <span>case-download</span></p></div>

            <div class="col-sm-4" data-name="case-play" tooltip="f12c"><p><i class="zmdi zmdi-case-play zmdi-hc-fw"></i> <span>case-play</span></p></div>

            <div class="col-sm-4" data-name="case" tooltip="f12d"><p><i class="zmdi zmdi-case zmdi-hc-fw"></i> <span>case</span></p></div>

            <div class="col-sm-4" data-name="cast-connected" tooltip="f12e"><p><i class="zmdi zmdi-cast-connected zmdi-hc-fw"></i> <span>cast-connected</span></p></div>

            <div class="col-sm-4" data-name="cast" tooltip="f12f"><p><i class="zmdi zmdi-cast zmdi-hc-fw"></i> <span>cast</span></p></div>

            <div class="col-sm-4" data-name="chart-donut" tooltip="f130"><p><i class="zmdi zmdi-chart-donut zmdi-hc-fw"></i> <span>chart-donut</span></p></div>

            <div class="col-sm-4" data-name="chart" tooltip="f131"><p><i class="zmdi zmdi-chart zmdi-hc-fw"></i> <span>chart</span></p></div>

            <div class="col-sm-4" data-name="city-alt" tooltip="f132"><p><i class="zmdi zmdi-city-alt zmdi-hc-fw"></i> <span>city-alt</span></p></div>

            <div class="col-sm-4" data-name="city" tooltip="f133"><p><i class="zmdi zmdi-city zmdi-hc-fw"></i> <span>city</span></p></div>

            <div class="col-sm-4" data-name="close-circle-o" tooltip="f134"><p><i class="zmdi zmdi-close-circle-o zmdi-hc-fw"></i> <span>close-circle-o</span></p></div>

            <div class="col-sm-4" data-name="close-circle" tooltip="f135"><p><i class="zmdi zmdi-close-circle zmdi-hc-fw"></i> <span>close-circle</span></p></div>

            <div class="col-sm-4" data-name="close" tooltip="f136"><p><i class="zmdi zmdi-close zmdi-hc-fw"></i> <span>close</span></p></div>

            <div class="col-sm-4" data-name="cocktail" tooltip="f137"><p><i class="zmdi zmdi-cocktail zmdi-hc-fw"></i> <span>cocktail</span></p></div>

            <div class="col-sm-4" data-name="code-setting" tooltip="f138"><p><i class="zmdi zmdi-code-setting zmdi-hc-fw"></i> <span>code-setting</span></p></div>

            <div class="col-sm-4" data-name="code-smartphone" tooltip="f139"><p><i class="zmdi zmdi-code-smartphone zmdi-hc-fw"></i> <span>code-smartphone</span></p></div>

            <div class="col-sm-4" data-name="code" tooltip="f13a"><p><i class="zmdi zmdi-code zmdi-hc-fw"></i> <span>code</span></p></div>

            <div class="col-sm-4" data-name="coffee" tooltip="f13b"><p><i class="zmdi zmdi-coffee zmdi-hc-fw"></i> <span>coffee</span></p></div>

            <div class="col-sm-4" data-name="collection-bookmark" tooltip="f13c"><p><i class="zmdi zmdi-collection-bookmark zmdi-hc-fw"></i> <span>collection-bookmark</span></p></div>

            <div class="col-sm-4" data-name="collection-case-play" tooltip="f13d"><p><i class="zmdi zmdi-collection-case-play zmdi-hc-fw"></i> <span>collection-case-play</span></p></div>

            <div class="col-sm-4" data-name="collection-folder-image" tooltip="f13e"><p><i class="zmdi zmdi-collection-folder-image zmdi-hc-fw"></i> <span>collection-folder-image</span></p></div>

            <div class="col-sm-4" data-name="collection-image-o" tooltip="f13f"><p><i class="zmdi zmdi-collection-image-o zmdi-hc-fw"></i> <span>collection-image-o</span></p></div>

            <div class="col-sm-4" data-name="collection-image" tooltip="f140"><p><i class="zmdi zmdi-collection-image zmdi-hc-fw"></i> <span>collection-image</span></p></div>

            <div class="col-sm-4" data-name="collection-item-1" tooltip="f141"><p><i class="zmdi zmdi-collection-item-1 zmdi-hc-fw"></i> <span>collection-item-1</span></p></div>

            <div class="col-sm-4" data-name="collection-item-2" tooltip="f142"><p><i class="zmdi zmdi-collection-item-2 zmdi-hc-fw"></i> <span>collection-item-2</span></p></div>

            <div class="col-sm-4" data-name="collection-item-3" tooltip="f143"><p><i class="zmdi zmdi-collection-item-3 zmdi-hc-fw"></i> <span>collection-item-3</span></p></div>

            <div class="col-sm-4" data-name="collection-item-4" tooltip="f144"><p><i class="zmdi zmdi-collection-item-4 zmdi-hc-fw"></i> <span>collection-item-4</span></p></div>

            <div class="col-sm-4" data-name="collection-item-5" tooltip="f145"><p><i class="zmdi zmdi-collection-item-5 zmdi-hc-fw"></i> <span>collection-item-5</span></p></div>

            <div class="col-sm-4" data-name="collection-item-6" tooltip="f146"><p><i class="zmdi zmdi-collection-item-6 zmdi-hc-fw"></i> <span>collection-item-6</span></p></div>

            <div class="col-sm-4" data-name="collection-item-7" tooltip="f147"><p><i class="zmdi zmdi-collection-item-7 zmdi-hc-fw"></i> <span>collection-item-7</span></p></div>

            <div class="col-sm-4" data-name="collection-item-8" tooltip="f148"><p><i class="zmdi zmdi-collection-item-8 zmdi-hc-fw"></i> <span>collection-item-8</span></p></div>

            <div class="col-sm-4" data-name="collection-item-9-plus" tooltip="f149"><p><i class="zmdi zmdi-collection-item-9-plus zmdi-hc-fw"></i> <span>collection-item-9-plus</span></p></div>

            <div class="col-sm-4" data-name="collection-item-9" tooltip="f14a"><p><i class="zmdi zmdi-collection-item-9 zmdi-hc-fw"></i> <span>collection-item-9</span></p></div>

            <div class="col-sm-4" data-name="collection-item" tooltip="f14b"><p><i class="zmdi zmdi-collection-item zmdi-hc-fw"></i> <span>collection-item</span></p></div>

            <div class="col-sm-4" data-name="collection-music" tooltip="f14c"><p><i class="zmdi zmdi-collection-music zmdi-hc-fw"></i> <span>collection-music</span></p></div>

            <div class="col-sm-4" data-name="collection-pdf" tooltip="f14d"><p><i class="zmdi zmdi-collection-pdf zmdi-hc-fw"></i> <span>collection-pdf</span></p></div>

            <div class="col-sm-4" data-name="collection-plus" tooltip="f14e"><p><i class="zmdi zmdi-collection-plus zmdi-hc-fw"></i> <span>collection-plus</span></p></div>

            <div class="col-sm-4" data-name="collection-speaker" tooltip="f14f"><p><i class="zmdi zmdi-collection-speaker zmdi-hc-fw"></i> <span>collection-speaker</span></p></div>

            <div class="col-sm-4" data-name="collection-text" tooltip="f150"><p><i class="zmdi zmdi-collection-text zmdi-hc-fw"></i> <span>collection-text</span></p></div>

            <div class="col-sm-4" data-name="collection-video" tooltip="f151"><p><i class="zmdi zmdi-collection-video zmdi-hc-fw"></i> <span>collection-video</span></p></div>

            <div class="col-sm-4" data-name="compass" tooltip="f152"><p><i class="zmdi zmdi-compass zmdi-hc-fw"></i> <span>compass</span></p></div>

            <div class="col-sm-4" data-name="cutlery" tooltip="f153"><p><i class="zmdi zmdi-cutlery zmdi-hc-fw"></i> <span>cutlery</span></p></div>

            <div class="col-sm-4" data-name="delete" tooltip="f154"><p><i class="zmdi zmdi-delete zmdi-hc-fw"></i> <span>delete</span></p></div>

            <div class="col-sm-4" data-name="dialpad" tooltip="f155"><p><i class="zmdi zmdi-dialpad zmdi-hc-fw"></i> <span>dialpad</span></p></div>

            <div class="col-sm-4" data-name="dns" tooltip="f156"><p><i class="zmdi zmdi-dns zmdi-hc-fw"></i> <span>dns</span></p></div>

            <div class="col-sm-4" data-name="drink" tooltip="f157"><p><i class="zmdi zmdi-drink zmdi-hc-fw"></i> <span>drink</span></p></div>

            <div class="col-sm-4" data-name="edit" tooltip="f158"><p><i class="zmdi zmdi-edit zmdi-hc-fw"></i> <span>edit</span></p></div>

            <div class="col-sm-4" data-name="email-open" tooltip="f159"><p><i class="zmdi zmdi-email-open zmdi-hc-fw"></i> <span>email-open</span></p></div>

            <div class="col-sm-4" data-name="email" tooltip="f15a"><p><i class="zmdi zmdi-email zmdi-hc-fw"></i> <span>email</span></p></div>

            <div class="col-sm-4" data-name="eye-off" tooltip="f15b"><p><i class="zmdi zmdi-eye-off zmdi-hc-fw"></i> <span>eye-off</span></p></div>

            <div class="col-sm-4" data-name="eye" tooltip="f15c"><p><i class="zmdi zmdi-eye zmdi-hc-fw"></i> <span>eye</span></p></div>

            <div class="col-sm-4" data-name="eyedropper" tooltip="f15d"><p><i class="zmdi zmdi-eyedropper zmdi-hc-fw"></i> <span>eyedropper</span></p></div>

            <div class="col-sm-4" data-name="favorite-outline" tooltip="f15e"><p><i class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i> <span>favorite-outline</span></p></div>

            <div class="col-sm-4" data-name="favorite" tooltip="f15f"><p><i class="zmdi zmdi-favorite zmdi-hc-fw"></i> <span>favorite</span></p></div>

            <div class="col-sm-4" data-name="filter-list" tooltip="f160"><p><i class="zmdi zmdi-filter-list zmdi-hc-fw"></i> <span>filter-list</span></p></div>

            <div class="col-sm-4" data-name="fire" tooltip="f161"><p><i class="zmdi zmdi-fire zmdi-hc-fw"></i> <span>fire</span></p></div>

            <div class="col-sm-4" data-name="flag" tooltip="f162"><p><i class="zmdi zmdi-flag zmdi-hc-fw"></i> <span>flag</span></p></div>

            <div class="col-sm-4" data-name="flare" tooltip="f163"><p><i class="zmdi zmdi-flare zmdi-hc-fw"></i> <span>flare</span></p></div>

            <div class="col-sm-4" data-name="flash-auto" tooltip="f164"><p><i class="zmdi zmdi-flash-auto zmdi-hc-fw"></i> <span>flash-auto</span></p></div>

            <div class="col-sm-4" data-name="flash-off" tooltip="f165"><p><i class="zmdi zmdi-flash-off zmdi-hc-fw"></i> <span>flash-off</span></p></div>

            <div class="col-sm-4" data-name="flash" tooltip="f166"><p><i class="zmdi zmdi-flash zmdi-hc-fw"></i> <span>flash</span></p></div>

            <div class="col-sm-4" data-name="flip" tooltip="f167"><p><i class="zmdi zmdi-flip zmdi-hc-fw"></i> <span>flip</span></p></div>

            <div class="col-sm-4" data-name="flower-alt" tooltip="f168"><p><i class="zmdi zmdi-flower-alt zmdi-hc-fw"></i> <span>flower-alt</span></p></div>

            <div class="col-sm-4" data-name="flower" tooltip="f169"><p><i class="zmdi zmdi-flower zmdi-hc-fw"></i> <span>flower</span></p></div>

            <div class="col-sm-4" data-name="font" tooltip="f16a"><p><i class="zmdi zmdi-font zmdi-hc-fw"></i> <span>font</span></p></div>

            <div class="col-sm-4" data-name="fullscreen-alt" tooltip="f16b"><p><i class="zmdi zmdi-fullscreen-alt zmdi-hc-fw"></i> <span>fullscreen-alt</span></p></div>

            <div class="col-sm-4" data-name="fullscreen-exit" tooltip="f16c"><p><i class="zmdi zmdi-fullscreen-exit zmdi-hc-fw"></i> <span>fullscreen-exit</span></p></div>

            <div class="col-sm-4" data-name="fullscreen" tooltip="f16d"><p><i class="zmdi zmdi-fullscreen zmdi-hc-fw"></i> <span>fullscreen</span></p></div>

            <div class="col-sm-4" data-name="functions" tooltip="f16e"><p><i class="zmdi zmdi-functions zmdi-hc-fw"></i> <span>functions</span></p></div>

            <div class="col-sm-4" data-name="gas-station" tooltip="f16f"><p><i class="zmdi zmdi-gas-station zmdi-hc-fw"></i> <span>gas-station</span></p></div>

            <div class="col-sm-4" data-name="gesture" tooltip="f170"><p><i class="zmdi zmdi-gesture zmdi-hc-fw"></i> <span>gesture</span></p></div>

            <div class="col-sm-4" data-name="globe-alt" tooltip="f171"><p><i class="zmdi zmdi-globe-alt zmdi-hc-fw"></i> <span>globe-alt</span></p></div>

            <div class="col-sm-4" data-name="globe-lock" tooltip="f172"><p><i class="zmdi zmdi-globe-lock zmdi-hc-fw"></i> <span>globe-lock</span></p></div>

            <div class="col-sm-4" data-name="globe" tooltip="f173"><p><i class="zmdi zmdi-globe zmdi-hc-fw"></i> <span>globe</span></p></div>

            <div class="col-sm-4" data-name="graduation-cap" tooltip="f174"><p><i class="zmdi zmdi-graduation-cap zmdi-hc-fw"></i> <span>graduation-cap</span></p></div>

            <div class="col-sm-4" data-name="home" tooltip="f175"><p><i class="zmdi zmdi-home zmdi-hc-fw"></i> <span>home</span></p></div>

            <div class="col-sm-4" data-name="hospital-alt" tooltip="f176"><p><i class="zmdi zmdi-hospital-alt zmdi-hc-fw"></i> <span>hospital-alt</span></p></div>

            <div class="col-sm-4" data-name="hospital" tooltip="f177"><p><i class="zmdi zmdi-hospital zmdi-hc-fw"></i> <span>hospital</span></p></div>

            <div class="col-sm-4" data-name="hotel" tooltip="f178"><p><i class="zmdi zmdi-hotel zmdi-hc-fw"></i> <span>hotel</span></p></div>

            <div class="col-sm-4" data-name="hourglass-alt" tooltip="f179"><p><i class="zmdi zmdi-hourglass-alt zmdi-hc-fw"></i> <span>hourglass-alt</span></p></div>

            <div class="col-sm-4" data-name="hourglass-outline" tooltip="f17a"><p><i class="zmdi zmdi-hourglass-outline zmdi-hc-fw"></i> <span>hourglass-outline</span></p></div>

            <div class="col-sm-4" data-name="hourglass" tooltip="f17b"><p><i class="zmdi zmdi-hourglass zmdi-hc-fw"></i> <span>hourglass</span></p></div>

            <div class="col-sm-4" data-name="http" tooltip="f17c"><p><i class="zmdi zmdi-http zmdi-hc-fw"></i> <span>http</span></p></div>

            <div class="col-sm-4" data-name="image-alt" tooltip="f17d"><p><i class="zmdi zmdi-image-alt zmdi-hc-fw"></i> <span>image-alt</span></p></div>

            <div class="col-sm-4" data-name="image-o" tooltip="f17e"><p><i class="zmdi zmdi-image-o zmdi-hc-fw"></i> <span>image-o</span></p></div>

            <div class="col-sm-4" data-name="image" tooltip="f17f"><p><i class="zmdi zmdi-image zmdi-hc-fw"></i> <span>image</span></p></div>

            <div class="col-sm-4" data-name="inbox" tooltip="f180"><p><i class="zmdi zmdi-inbox zmdi-hc-fw"></i> <span>inbox</span></p></div>

            <div class="col-sm-4" data-name="invert-colors-off" tooltip="f181"><p><i class="zmdi zmdi-invert-colors-off zmdi-hc-fw"></i> <span>invert-colors-off</span></p></div>

            <div class="col-sm-4" data-name="invert-colors" tooltip="f182"><p><i class="zmdi zmdi-invert-colors zmdi-hc-fw"></i> <span>invert-colors</span></p></div>

            <div class="col-sm-4" data-name="key" tooltip="f183"><p><i class="zmdi zmdi-key zmdi-hc-fw"></i> <span>key</span></p></div>

            <div class="col-sm-4" data-name="label-alt-outline" tooltip="f184"><p><i class="zmdi zmdi-label-alt-outline zmdi-hc-fw"></i> <span>label-alt-outline</span></p></div>

            <div class="col-sm-4" data-name="label-alt" tooltip="f185"><p><i class="zmdi zmdi-label-alt zmdi-hc-fw"></i> <span>label-alt</span></p></div>

            <div class="col-sm-4" data-name="label-heart" tooltip="f186"><p><i class="zmdi zmdi-label-heart zmdi-hc-fw"></i> <span>label-heart</span></p></div>

            <div class="col-sm-4" data-name="label" tooltip="f187"><p><i class="zmdi zmdi-label zmdi-hc-fw"></i> <span>label</span></p></div>

            <div class="col-sm-4" data-name="labels" tooltip="f188"><p><i class="zmdi zmdi-labels zmdi-hc-fw"></i> <span>labels</span></p></div>

            <div class="col-sm-4" data-name="lamp" tooltip="f189"><p><i class="zmdi zmdi-lamp zmdi-hc-fw"></i> <span>lamp</span></p></div>

            <div class="col-sm-4" data-name="landscape" tooltip="f18a"><p><i class="zmdi zmdi-landscape zmdi-hc-fw"></i> <span>landscape</span></p></div>

            <div class="col-sm-4" data-name="layers-off" tooltip="f18b"><p><i class="zmdi zmdi-layers-off zmdi-hc-fw"></i> <span>layers-off</span></p></div>

            <div class="col-sm-4" data-name="layers" tooltip="f18c"><p><i class="zmdi zmdi-layers zmdi-hc-fw"></i> <span>layers</span></p></div>

            <div class="col-sm-4" data-name="library" tooltip="f18d"><p><i class="zmdi zmdi-library zmdi-hc-fw"></i> <span>library</span></p></div>

            <div class="col-sm-4" data-name="link" tooltip="f18e"><p><i class="zmdi zmdi-link zmdi-hc-fw"></i> <span>link</span></p></div>

            <div class="col-sm-4" data-name="lock-open" tooltip="f18f"><p><i class="zmdi zmdi-lock-open zmdi-hc-fw"></i> <span>lock-open</span></p></div>

            <div class="col-sm-4" data-name="lock-outline" tooltip="f190"><p><i class="zmdi zmdi-lock-outline zmdi-hc-fw"></i> <span>lock-outline</span></p></div>

            <div class="col-sm-4" data-name="lock" tooltip="f191"><p><i class="zmdi zmdi-lock zmdi-hc-fw"></i> <span>lock</span></p></div>

            <div class="col-sm-4" data-name="mail-reply-all" tooltip="f192"><p><i class="zmdi zmdi-mail-reply-all zmdi-hc-fw"></i> <span>mail-reply-all</span></p></div>

            <div class="col-sm-4" data-name="mail-reply" tooltip="f193"><p><i class="zmdi zmdi-mail-reply zmdi-hc-fw"></i> <span>mail-reply</span></p></div>

            <div class="col-sm-4" data-name="mail-send" tooltip="f194"><p><i class="zmdi zmdi-mail-send zmdi-hc-fw"></i> <span>mail-send</span></p></div>

            <div class="col-sm-4" data-name="mall" tooltip="f195"><p><i class="zmdi zmdi-mall zmdi-hc-fw"></i> <span>mall</span></p></div>

            <div class="col-sm-4" data-name="map" tooltip="f196"><p><i class="zmdi zmdi-map zmdi-hc-fw"></i> <span>map</span></p></div>

            <div class="col-sm-4" data-name="menu" tooltip="f197"><p><i class="zmdi zmdi-menu zmdi-hc-fw"></i> <span>menu</span></p></div>

            <div class="col-sm-4" data-name="money-box" tooltip="f198"><p><i class="zmdi zmdi-money-box zmdi-hc-fw"></i> <span>money-box</span></p></div>

            <div class="col-sm-4" data-name="money-off" tooltip="f199"><p><i class="zmdi zmdi-money-off zmdi-hc-fw"></i> <span>money-off</span></p></div>

            <div class="col-sm-4" data-name="money" tooltip="f19a"><p><i class="zmdi zmdi-money zmdi-hc-fw"></i> <span>money</span></p></div>

            <div class="col-sm-4" data-name="more-vert" tooltip="f19b"><p><i class="zmdi zmdi-more-vert zmdi-hc-fw"></i> <span>more-vert</span></p></div>

            <div class="col-sm-4" data-name="more" tooltip="f19c"><p><i class="zmdi zmdi-more zmdi-hc-fw"></i> <span>more</span></p></div>

            <div class="col-sm-4" data-name="movie-alt" tooltip="f19d"><p><i class="zmdi zmdi-movie-alt zmdi-hc-fw"></i> <span>movie-alt</span></p></div>

            <div class="col-sm-4" data-name="movie" tooltip="f19e"><p><i class="zmdi zmdi-movie zmdi-hc-fw"></i> <span>movie</span></p></div>

            <div class="col-sm-4" data-name="nature-people" tooltip="f19f"><p><i class="zmdi zmdi-nature-people zmdi-hc-fw"></i> <span>nature-people</span></p></div>

            <div class="col-sm-4" data-name="nature" tooltip="f1a0"><p><i class="zmdi zmdi-nature zmdi-hc-fw"></i> <span>nature</span></p></div>

            <div class="col-sm-4" data-name="navigation" tooltip="f1a1"><p><i class="zmdi zmdi-navigation zmdi-hc-fw"></i> <span>navigation</span></p></div>

            <div class="col-sm-4" data-name="open-in-browser" tooltip="f1a2"><p><i class="zmdi zmdi-open-in-browser zmdi-hc-fw"></i> <span>open-in-browser</span></p></div>

            <div class="col-sm-4" data-name="open-in-new" tooltip="f1a3"><p><i class="zmdi zmdi-open-in-new zmdi-hc-fw"></i> <span>open-in-new</span></p></div>

            <div class="col-sm-4" data-name="palette" tooltip="f1a4"><p><i class="zmdi zmdi-palette zmdi-hc-fw"></i> <span>palette</span></p></div>

            <div class="col-sm-4" data-name="parking" tooltip="f1a5"><p><i class="zmdi zmdi-parking zmdi-hc-fw"></i> <span>parking</span></p></div>

            <div class="col-sm-4" data-name="pin-account" tooltip="f1a6"><p><i class="zmdi zmdi-pin-account zmdi-hc-fw"></i> <span>pin-account</span></p></div>

            <div class="col-sm-4" data-name="pin-assistant" tooltip="f1a7"><p><i class="zmdi zmdi-pin-assistant zmdi-hc-fw"></i> <span>pin-assistant</span></p></div>

            <div class="col-sm-4" data-name="pin-drop" tooltip="f1a8"><p><i class="zmdi zmdi-pin-drop zmdi-hc-fw"></i> <span>pin-drop</span></p></div>

            <div class="col-sm-4" data-name="pin-help" tooltip="f1a9"><p><i class="zmdi zmdi-pin-help zmdi-hc-fw"></i> <span>pin-help</span></p></div>

            <div class="col-sm-4" data-name="pin-off" tooltip="f1aa"><p><i class="zmdi zmdi-pin-off zmdi-hc-fw"></i> <span>pin-off</span></p></div>

            <div class="col-sm-4" data-name="pin" tooltip="f1ab"><p><i class="zmdi zmdi-pin zmdi-hc-fw"></i> <span>pin</span></p></div>

            <div class="col-sm-4" data-name="pizza" tooltip="f1ac"><p><i class="zmdi zmdi-pizza zmdi-hc-fw"></i> <span>pizza</span></p></div>

            <div class="col-sm-4" data-name="plaster" tooltip="f1ad"><p><i class="zmdi zmdi-plaster zmdi-hc-fw"></i> <span>plaster</span></p></div>

            <div class="col-sm-4" data-name="power-setting" tooltip="f1ae"><p><i class="zmdi zmdi-power-setting zmdi-hc-fw"></i> <span>power-setting</span></p></div>

            <div class="col-sm-4" data-name="power" tooltip="f1af"><p><i class="zmdi zmdi-power zmdi-hc-fw"></i> <span>power</span></p></div>

            <div class="col-sm-4" data-name="print" tooltip="f1b0"><p><i class="zmdi zmdi-print zmdi-hc-fw"></i> <span>print</span></p></div>

            <div class="col-sm-4" data-name="puzzle-piece" tooltip="f1b1"><p><i class="zmdi zmdi-puzzle-piece zmdi-hc-fw"></i> <span>puzzle-piece</span></p></div>

            <div class="col-sm-4" data-name="quote" tooltip="f1b2"><p><i class="zmdi zmdi-quote zmdi-hc-fw"></i> <span>quote</span></p></div>

            <div class="col-sm-4" data-name="railway" tooltip="f1b3"><p><i class="zmdi zmdi-railway zmdi-hc-fw"></i> <span>railway</span></p></div>

            <div class="col-sm-4" data-name="receipt" tooltip="f1b4"><p><i class="zmdi zmdi-receipt zmdi-hc-fw"></i> <span>receipt</span></p></div>

            <div class="col-sm-4" data-name="refresh-alt" tooltip="f1b5"><p><i class="zmdi zmdi-refresh-alt zmdi-hc-fw"></i> <span>refresh-alt</span></p></div>

            <div class="col-sm-4" data-name="refresh-sync-alert" tooltip="f1b6"><p><i class="zmdi zmdi-refresh-sync-alert zmdi-hc-fw"></i> <span>refresh-sync-alert</span></p></div>

            <div class="col-sm-4" data-name="refresh-sync-off" tooltip="f1b7"><p><i class="zmdi zmdi-refresh-sync-off zmdi-hc-fw"></i> <span>refresh-sync-off</span></p></div>

            <div class="col-sm-4" data-name="refresh-sync" tooltip="f1b8"><p><i class="zmdi zmdi-refresh-sync zmdi-hc-fw"></i> <span>refresh-sync</span></p></div>

            <div class="col-sm-4" data-name="refresh" tooltip="f1b9"><p><i class="zmdi zmdi-refresh zmdi-hc-fw"></i> <span>refresh</span></p></div>

            <div class="col-sm-4" data-name="roller" tooltip="f1ba"><p><i class="zmdi zmdi-roller zmdi-hc-fw"></i> <span>roller</span></p></div>

            <div class="col-sm-4" data-name="ruler" tooltip="f1bb"><p><i class="zmdi zmdi-ruler zmdi-hc-fw"></i> <span>ruler</span></p></div>

            <div class="col-sm-4" data-name="scissors" tooltip="f1bc"><p><i class="zmdi zmdi-scissors zmdi-hc-fw"></i> <span>scissors</span></p></div>

            <div class="col-sm-4" data-name="screen-rotation-lock" tooltip="f1bd"><p><i class="zmdi zmdi-screen-rotation-lock zmdi-hc-fw"></i> <span>screen-rotation-lock</span></p></div>

            <div class="col-sm-4" data-name="screen-rotation" tooltip="f1be"><p><i class="zmdi zmdi-screen-rotation zmdi-hc-fw"></i> <span>screen-rotation</span></p></div>

            <div class="col-sm-4" data-name="search-for" tooltip="f1bf"><p><i class="zmdi zmdi-search-for zmdi-hc-fw"></i> <span>search-for</span></p></div>

            <div class="col-sm-4" data-name="search-in-file" tooltip="f1c0"><p><i class="zmdi zmdi-search-in-file zmdi-hc-fw"></i> <span>search-in-file</span></p></div>

            <div class="col-sm-4" data-name="search-in-page" tooltip="f1c1"><p><i class="zmdi zmdi-search-in-page zmdi-hc-fw"></i> <span>search-in-page</span></p></div>

            <div class="col-sm-4" data-name="search-replace" tooltip="f1c2"><p><i class="zmdi zmdi-search-replace zmdi-hc-fw"></i> <span>search-replace</span></p></div>

            <div class="col-sm-4" data-name="search" tooltip="f1c3"><p><i class="zmdi zmdi-search zmdi-hc-fw"></i> <span>search</span></p></div>

            <div class="col-sm-4" data-name="seat" tooltip="f1c4"><p><i class="zmdi zmdi-seat zmdi-hc-fw"></i> <span>seat</span></p></div>

            <div class="col-sm-4" data-name="settings-square" tooltip="f1c5"><p><i class="zmdi zmdi-settings-square zmdi-hc-fw"></i> <span>settings-square</span></p></div>

            <div class="col-sm-4" data-name="settings" tooltip="f1c6"><p><i class="zmdi zmdi-settings zmdi-hc-fw"></i> <span>settings</span></p></div>

            <div class="col-sm-4" data-name="shield-check" tooltip="f1c7"><p><i class="zmdi zmdi-shield-check zmdi-hc-fw"></i> <span>shield-check</span></p></div>

            <div class="col-sm-4" data-name="shield-security" tooltip="f1c8"><p><i class="zmdi zmdi-shield-security zmdi-hc-fw"></i> <span>shield-security</span></p></div>

            <div class="col-sm-4" data-name="shopping-basket" tooltip="f1c9"><p><i class="zmdi zmdi-shopping-basket zmdi-hc-fw"></i> <span>shopping-basket</span></p></div>

            <div class="col-sm-4" data-name="shopping-cart-plus" tooltip="f1ca"><p><i class="zmdi zmdi-shopping-cart-plus zmdi-hc-fw"></i> <span>shopping-cart-plus</span></p></div>

            <div class="col-sm-4" data-name="shopping-cart" tooltip="f1cb"><p><i class="zmdi zmdi-shopping-cart zmdi-hc-fw"></i> <span>shopping-cart</span></p></div>

            <div class="col-sm-4" data-name="sign-in" tooltip="f1cc"><p><i class="zmdi zmdi-sign-in zmdi-hc-fw"></i> <span>sign-in</span></p></div>

            <div class="col-sm-4" data-name="sort-amount-asc" tooltip="f1cd"><p><i class="zmdi zmdi-sort-amount-asc zmdi-hc-fw"></i> <span>sort-amount-asc</span></p></div>

            <div class="col-sm-4" data-name="sort-amount-desc" tooltip="f1ce"><p><i class="zmdi zmdi-sort-amount-desc zmdi-hc-fw"></i> <span>sort-amount-desc</span></p></div>

            <div class="col-sm-4" data-name="sort-asc" tooltip="f1cf"><p><i class="zmdi zmdi-sort-asc zmdi-hc-fw"></i> <span>sort-asc</span></p></div>

            <div class="col-sm-4" data-name="sort-desc" tooltip="f1d0"><p><i class="zmdi zmdi-sort-desc zmdi-hc-fw"></i> <span>sort-desc</span></p></div>

            <div class="col-sm-4" data-name="spellcheck" tooltip="f1d1"><p><i class="zmdi zmdi-spellcheck zmdi-hc-fw"></i> <span>spellcheck</span></p></div>

            <div class="col-sm-4" data-name="storage" tooltip="f1d2"><p><i class="zmdi zmdi-storage zmdi-hc-fw"></i> <span>storage</span></p></div>

            <div class="col-sm-4" data-name="store-24" tooltip="f1d3"><p><i class="zmdi zmdi-store-24 zmdi-hc-fw"></i> <span>store-24</span></p></div>

            <div class="col-sm-4" data-name="store" tooltip="f1d4"><p><i class="zmdi zmdi-store zmdi-hc-fw"></i> <span>store</span></p></div>

            <div class="col-sm-4" data-name="subway" tooltip="f1d5"><p><i class="zmdi zmdi-subway zmdi-hc-fw"></i> <span>subway</span></p></div>

            <div class="col-sm-4" data-name="sun" tooltip="f1d6"><p><i class="zmdi zmdi-sun zmdi-hc-fw"></i> <span>sun</span></p></div>

            <div class="col-sm-4" data-name="tab-unselected" tooltip="f1d7"><p><i class="zmdi zmdi-tab-unselected zmdi-hc-fw"></i> <span>tab-unselected</span></p></div>

            <div class="col-sm-4" data-name="tab" tooltip="f1d8"><p><i class="zmdi zmdi-tab zmdi-hc-fw"></i> <span>tab</span></p></div>

            <div class="col-sm-4" data-name="tag-close" tooltip="f1d9"><p><i class="zmdi zmdi-tag-close zmdi-hc-fw"></i> <span>tag-close</span></p></div>

            <div class="col-sm-4" data-name="tag-more" tooltip="f1da"><p><i class="zmdi zmdi-tag-more zmdi-hc-fw"></i> <span>tag-more</span></p></div>

            <div class="col-sm-4" data-name="tag" tooltip="f1db"><p><i class="zmdi zmdi-tag zmdi-hc-fw"></i> <span>tag</span></p></div>

            <div class="col-sm-4" data-name="thumb-down" tooltip="f1dc"><p><i class="zmdi zmdi-thumb-down zmdi-hc-fw"></i> <span>thumb-down</span></p></div>

            <div class="col-sm-4" data-name="thumb-up-down" tooltip="f1dd"><p><i class="zmdi zmdi-thumb-up-down zmdi-hc-fw"></i> <span>thumb-up-down</span></p></div>

            <div class="col-sm-4" data-name="thumb-up" tooltip="f1de"><p><i class="zmdi zmdi-thumb-up zmdi-hc-fw"></i> <span>thumb-up</span></p></div>

            <div class="col-sm-4" data-name="ticket-star" tooltip="f1df"><p><i class="zmdi zmdi-ticket-star zmdi-hc-fw"></i> <span>ticket-star</span></p></div>

            <div class="col-sm-4" data-name="toll" tooltip="f1e0"><p><i class="zmdi zmdi-toll zmdi-hc-fw"></i> <span>toll</span></p></div>

            <div class="col-sm-4" data-name="toys" tooltip="f1e1"><p><i class="zmdi zmdi-toys zmdi-hc-fw"></i> <span>toys</span></p></div>

            <div class="col-sm-4" data-name="traffic" tooltip="f1e2"><p><i class="zmdi zmdi-traffic zmdi-hc-fw"></i> <span>traffic</span></p></div>

            <div class="col-sm-4" data-name="translate" tooltip="f1e3"><p><i class="zmdi zmdi-translate zmdi-hc-fw"></i> <span>translate</span></p></div>

            <div class="col-sm-4" data-name="triangle-down" tooltip="f1e4"><p><i class="zmdi zmdi-triangle-down zmdi-hc-fw"></i> <span>triangle-down</span></p></div>

            <div class="col-sm-4" data-name="triangle-up" tooltip="f1e5"><p><i class="zmdi zmdi-triangle-up zmdi-hc-fw"></i> <span>triangle-up</span></p></div>

            <div class="col-sm-4" data-name="truck" tooltip="f1e6"><p><i class="zmdi zmdi-truck zmdi-hc-fw"></i> <span>truck</span></p></div>

            <div class="col-sm-4" data-name="turning-sign" tooltip="f1e7"><p><i class="zmdi zmdi-turning-sign zmdi-hc-fw"></i> <span>turning-sign</span></p></div>

            <div class="col-sm-4" data-name="wallpaper" tooltip="f1e8"><p><i class="zmdi zmdi-wallpaper zmdi-hc-fw"></i> <span>wallpaper</span></p></div>

            <div class="col-sm-4" data-name="washing-machine" tooltip="f1e9"><p><i class="zmdi zmdi-washing-machine zmdi-hc-fw"></i> <span>washing-machine</span></p></div>

            <div class="col-sm-4" data-name="window-maximize" tooltip="f1ea"><p><i class="zmdi zmdi-window-maximize zmdi-hc-fw"></i> <span>window-maximize</span></p></div>

            <div class="col-sm-4" data-name="window-minimize" tooltip="f1eb"><p><i class="zmdi zmdi-window-minimize zmdi-hc-fw"></i> <span>window-minimize</span></p></div>

            <div class="col-sm-4" data-name="window-restore" tooltip="f1ec"><p><i class="zmdi zmdi-window-restore zmdi-hc-fw"></i> <span>window-restore</span></p></div>

            <div class="col-sm-4" data-name="wrench" tooltip="f1ed"><p><i class="zmdi zmdi-wrench zmdi-hc-fw"></i> <span>wrench</span></p></div>

            <div class="col-sm-4" data-name="zoom-in" tooltip="f1ee"><p><i class="zmdi zmdi-zoom-in zmdi-hc-fw"></i> <span>zoom-in</span></p></div>

            <div class="col-sm-4" data-name="zoom-out" tooltip="f1ef"><p><i class="zmdi zmdi-zoom-out zmdi-hc-fw"></i> <span>zoom-out</span></p></div>

          </div>
        </div>
      </div>

      <div class="card icons-demo">
        <div class="card-header">
          <h2>Notifications</h2>
        </div>

        <div class="card-body card-padding">
          <div class="row">
            <div class="col-sm-4" data-name="alert-circle-o" tooltip="f1f0"><p><i class="zmdi zmdi-alert-circle-o zmdi-hc-fw"></i> <span>alert-circle-o</span></p></div>

            <div class="col-sm-4" data-name="alert-circle" tooltip="f1f1"><p><i class="zmdi zmdi-alert-circle zmdi-hc-fw"></i> <span>alert-circle</span></p></div>

            <div class="col-sm-4" data-name="alert-octagon" tooltip="f1f2"><p><i class="zmdi zmdi-alert-octagon zmdi-hc-fw"></i> <span>alert-octagon</span></p></div>

            <div class="col-sm-4" data-name="alert-polygon" tooltip="f1f3"><p><i class="zmdi zmdi-alert-polygon zmdi-hc-fw"></i> <span>alert-polygon</span></p></div>

            <div class="col-sm-4" data-name="alert-triangle" tooltip="f1f4"><p><i class="zmdi zmdi-alert-triangle zmdi-hc-fw"></i> <span>alert-triangle</span></p></div>

            <div class="col-sm-4" data-name="help-outline" tooltip="f1f5"><p><i class="zmdi zmdi-help-outline zmdi-hc-fw"></i> <span>help-outline</span></p></div>

            <div class="col-sm-4" data-name="help" tooltip="f1f6"><p><i class="zmdi zmdi-help zmdi-hc-fw"></i> <span>help</span></p></div>

            <div class="col-sm-4" data-name="info-outline" tooltip="f1f7"><p><i class="zmdi zmdi-info-outline zmdi-hc-fw"></i> <span>info-outline</span></p></div>

            <div class="col-sm-4" data-name="info" tooltip="f1f8"><p><i class="zmdi zmdi-info zmdi-hc-fw"></i> <span>info</span></p></div>

            <div class="col-sm-4" data-name="notifications-active" tooltip="f1f9"><p><i class="zmdi zmdi-notifications-active zmdi-hc-fw"></i> <span>notifications-active</span></p></div>

            <div class="col-sm-4" data-name="notifications-add" tooltip="f1fa"><p><i class="zmdi zmdi-notifications-add zmdi-hc-fw"></i> <span>notifications-add</span></p></div>

            <div class="col-sm-4" data-name="notifications-none" tooltip="f1fb"><p><i class="zmdi zmdi-notifications-none zmdi-hc-fw"></i> <span>notifications-none</span></p></div>

            <div class="col-sm-4" data-name="notifications-off" tooltip="f1fc"><p><i class="zmdi zmdi-notifications-off zmdi-hc-fw"></i> <span>notifications-off</span></p></div>

            <div class="col-sm-4" data-name="notifications-paused" tooltip="f1fd"><p><i class="zmdi zmdi-notifications-paused zmdi-hc-fw"></i> <span>notifications-paused</span></p></div>

            <div class="col-sm-4" data-name="notifications" tooltip="f1fe"><p><i class="zmdi zmdi-notifications zmdi-hc-fw"></i> <span>notifications</span></p></div>

          </div>
        </div>
      </div>

      <div class="card icons-demo">
        <div class="card-header">
          <h2>Person</h2>
        </div>

        <div class="card-body card-padding">
          <div class="row">

            <div class="col-sm-4" data-name="account-add" tooltip="f1ff"><p><i class="zmdi zmdi-account-add zmdi-hc-fw"></i> <span>account-add</span></p></div>

            <div class="col-sm-4" data-name="account-box-mail" tooltip="f200"><p><i class="zmdi zmdi-account-box-mail zmdi-hc-fw"></i> <span>account-box-mail</span></p></div>

            <div class="col-sm-4" data-name="account-box-o" tooltip="f201"><p><i class="zmdi zmdi-account-box-o zmdi-hc-fw"></i> <span>account-box-o</span></p></div>

            <div class="col-sm-4" data-name="account-box-phone" tooltip="f202"><p><i class="zmdi zmdi-account-box-phone zmdi-hc-fw"></i> <span>account-box-phone</span></p></div>

            <div class="col-sm-4" data-name="account-box" tooltip="f203"><p><i class="zmdi zmdi-account-box zmdi-hc-fw"></i> <span>account-box</span></p></div>

            <div class="col-sm-4" data-name="account-calendar" tooltip="f204"><p><i class="zmdi zmdi-account-calendar zmdi-hc-fw"></i> <span>account-calendar</span></p></div>

            <div class="col-sm-4" data-name="account-circle" tooltip="f205"><p><i class="zmdi zmdi-account-circle zmdi-hc-fw"></i> <span>account-circle</span></p></div>

            <div class="col-sm-4" data-name="account-o" tooltip="f206"><p><i class="zmdi zmdi-account-o zmdi-hc-fw"></i> <span>account-o</span></p></div>

            <div class="col-sm-4" data-name="account" tooltip="f207"><p><i class="zmdi zmdi-account zmdi-hc-fw"></i> <span>account</span></p></div>

            <div class="col-sm-4" data-name="accounts-add" tooltip="f208"><p><i class="zmdi zmdi-accounts-add zmdi-hc-fw"></i> <span>accounts-add</span></p></div>

            <div class="col-sm-4" data-name="accounts-alt" tooltip="f209"><p><i class="zmdi zmdi-accounts-alt zmdi-hc-fw"></i> <span>accounts-alt</span></p></div>

            <div class="col-sm-4" data-name="accounts-list-alt" tooltip="f20a"><p><i class="zmdi zmdi-accounts-list-alt zmdi-hc-fw"></i> <span>accounts-list-alt</span></p></div>

            <div class="col-sm-4" data-name="accounts-list" tooltip="f20b"><p><i class="zmdi zmdi-accounts-list zmdi-hc-fw"></i> <span>accounts-list</span></p></div>

            <div class="col-sm-4" data-name="accounts-outline" tooltip="f20c"><p><i class="zmdi zmdi-accounts-outline zmdi-hc-fw"></i> <span>accounts-outline</span></p></div>

            <div class="col-sm-4" data-name="accounts" tooltip="f20d"><p><i class="zmdi zmdi-accounts zmdi-hc-fw"></i> <span>accounts</span></p></div>

            <div class="col-sm-4" data-name="face" tooltip="f20e"><p><i class="zmdi zmdi-face zmdi-hc-fw"></i> <span>face</span></p></div>

            <div class="col-sm-4" data-name="female" tooltip="f20f"><p><i class="zmdi zmdi-female zmdi-hc-fw"></i> <span>female</span></p></div>

            <div class="col-sm-4" data-name="male-alt" tooltip="f210"><p><i class="zmdi zmdi-male-alt zmdi-hc-fw"></i> <span>male-alt</span></p></div>

            <div class="col-sm-4" data-name="male-female" tooltip="f211"><p><i class="zmdi zmdi-male-female zmdi-hc-fw"></i> <span>male-female</span></p></div>

            <div class="col-sm-4" data-name="male" tooltip="f212"><p><i class="zmdi zmdi-male zmdi-hc-fw"></i> <span>male</span></p></div>

            <div class="col-sm-4" data-name="mood-bad" tooltip="f213"><p><i class="zmdi zmdi-mood-bad zmdi-hc-fw"></i> <span>mood-bad</span></p></div>

            <div class="col-sm-4" data-name="mood" tooltip="f214"><p><i class="zmdi zmdi-mood zmdi-hc-fw"></i> <span>mood</span></p></div>

            <div class="col-sm-4" data-name="run" tooltip="f215"><p><i class="zmdi zmdi-run zmdi-hc-fw"></i> <span>run</span></p></div>

            <div class="col-sm-4" data-name="walk" tooltip="f216"><p><i class="zmdi zmdi-walk zmdi-hc-fw"></i> <span>walk</span></p></div>

          </div>
        </div>
      </div>

      <div class="card icons-demo">
        <div class="card-header">
          <h2>File</h2>
        </div>

        <div class="card-body card-padding">
          <div class="row">

            <div class="col-sm-4" data-name="cloud-box" tooltip="f217"><p><i class="zmdi zmdi-cloud-box zmdi-hc-fw"></i> <span>cloud-box</span></p></div>

            <div class="col-sm-4" data-name="cloud-circle" tooltip="f218"><p><i class="zmdi zmdi-cloud-circle zmdi-hc-fw"></i> <span>cloud-circle</span></p></div>

            <div class="col-sm-4" data-name="cloud-done" tooltip="f219"><p><i class="zmdi zmdi-cloud-done zmdi-hc-fw"></i> <span>cloud-done</span></p></div>

            <div class="col-sm-4" data-name="cloud-download" tooltip="f21a"><p><i class="zmdi zmdi-cloud-download zmdi-hc-fw"></i> <span>cloud-download</span></p></div>

            <div class="col-sm-4" data-name="cloud-off" tooltip="f21b"><p><i class="zmdi zmdi-cloud-off zmdi-hc-fw"></i> <span>cloud-off</span></p></div>

            <div class="col-sm-4" data-name="cloud-outline-alt" tooltip="f21c"><p><i class="zmdi zmdi-cloud-outline-alt zmdi-hc-fw"></i> <span>cloud-outline-alt</span></p></div>

            <div class="col-sm-4" data-name="cloud-outline" tooltip="f21d"><p><i class="zmdi zmdi-cloud-outline zmdi-hc-fw"></i> <span>cloud-outline</span></p></div>

            <div class="col-sm-4" data-name="cloud-upload" tooltip="f21e"><p><i class="zmdi zmdi-cloud-upload zmdi-hc-fw"></i> <span>cloud-upload</span></p></div>

            <div class="col-sm-4" data-name="cloud" tooltip="f21f"><p><i class="zmdi zmdi-cloud zmdi-hc-fw"></i> <span>cloud</span></p></div>

            <div class="col-sm-4" data-name="download" tooltip="f220"><p><i class="zmdi zmdi-download zmdi-hc-fw"></i> <span>download</span></p></div>

            <div class="col-sm-4" data-name="file-plus" tooltip="f221"><p><i class="zmdi zmdi-file-plus zmdi-hc-fw"></i> <span>file-plus</span></p></div>

            <div class="col-sm-4" data-name="file-text" tooltip="f222"><p><i class="zmdi zmdi-file-text zmdi-hc-fw"></i> <span>file-text</span></p></div>

            <div class="col-sm-4" data-name="file" tooltip="f223"><p><i class="zmdi zmdi-file zmdi-hc-fw"></i> <span>file</span></p></div>

            <div class="col-sm-4" data-name="folder-outline" tooltip="f224"><p><i class="zmdi zmdi-folder-outline zmdi-hc-fw"></i> <span>folder-outline</span></p></div>

            <div class="col-sm-4" data-name="folder-person" tooltip="f225"><p><i class="zmdi zmdi-folder-person zmdi-hc-fw"></i> <span>folder-person</span></p></div>

            <div class="col-sm-4" data-name="folder-star-alt" tooltip="f226"><p><i class="zmdi zmdi-folder-star-alt zmdi-hc-fw"></i> <span>folder-star-alt</span></p></div>

            <div class="col-sm-4" data-name="folder-star" tooltip="f227"><p><i class="zmdi zmdi-folder-star zmdi-hc-fw"></i> <span>folder-star</span></p></div>

            <div class="col-sm-4" data-name="folder" tooltip="f228"><p><i class="zmdi zmdi-folder zmdi-hc-fw"></i> <span>folder</span></p></div>

            <div class="col-sm-4" data-name="gif" tooltip="f229"><p><i class="zmdi zmdi-gif zmdi-hc-fw"></i> <span>gif</span></p></div>

            <div class="col-sm-4" data-name="upload" tooltip="f22a"><p><i class="zmdi zmdi-upload zmdi-hc-fw"></i> <span>upload</span></p></div>

          </div>
        </div>
      </div>

      <div class="card icons-demo">
        <div class="card-header">
          <h2>Editor</h2>
        </div>

        <div class="card-body card-padding">
          <div class="row">

            <div class="col-sm-4" data-name="border-all" tooltip="f22b"><p><i class="zmdi zmdi-border-all zmdi-hc-fw"></i> <span>border-all</span></p></div>

            <div class="col-sm-4" data-name="border-bottom" tooltip="f22c"><p><i class="zmdi zmdi-border-bottom zmdi-hc-fw"></i> <span>border-bottom</span></p></div>

            <div class="col-sm-4" data-name="border-clear" tooltip="f22d"><p><i class="zmdi zmdi-border-clear zmdi-hc-fw"></i> <span>border-clear</span></p></div>

            <div class="col-sm-4" data-name="border-color" tooltip="f22e"><p><i class="zmdi zmdi-border-color zmdi-hc-fw"></i> <span>border-color</span></p></div>

            <div class="col-sm-4" data-name="border-horizontal" tooltip="f22f"><p><i class="zmdi zmdi-border-horizontal zmdi-hc-fw"></i> <span>border-horizontal</span></p></div>

            <div class="col-sm-4" data-name="border-inner" tooltip="f230"><p><i class="zmdi zmdi-border-inner zmdi-hc-fw"></i> <span>border-inner</span></p></div>

            <div class="col-sm-4" data-name="border-left" tooltip="f231"><p><i class="zmdi zmdi-border-left zmdi-hc-fw"></i> <span>border-left</span></p></div>

            <div class="col-sm-4" data-name="border-outer" tooltip="f232"><p><i class="zmdi zmdi-border-outer zmdi-hc-fw"></i> <span>border-outer</span></p></div>

            <div class="col-sm-4" data-name="border-right" tooltip="f233"><p><i class="zmdi zmdi-border-right zmdi-hc-fw"></i> <span>border-right</span></p></div>

            <div class="col-sm-4" data-name="border-style" tooltip="f234"><p><i class="zmdi zmdi-border-style zmdi-hc-fw"></i> <span>border-style</span></p></div>

            <div class="col-sm-4" data-name="border-top" tooltip="f235"><p><i class="zmdi zmdi-border-top zmdi-hc-fw"></i> <span>border-top</span></p></div>

            <div class="col-sm-4" data-name="border-vertical" tooltip="f236"><p><i class="zmdi zmdi-border-vertical zmdi-hc-fw"></i> <span>border-vertical</span></p></div>

            <div class="col-sm-4" data-name="copy" tooltip="f237"><p><i class="zmdi zmdi-copy zmdi-hc-fw"></i> <span>copy</span></p></div>

            <div class="col-sm-4" data-name="crop" tooltip="f238"><p><i class="zmdi zmdi-crop zmdi-hc-fw"></i> <span>crop</span></p></div>

            <div class="col-sm-4" data-name="format-align-center" tooltip="f239"><p><i class="zmdi zmdi-format-align-center zmdi-hc-fw"></i> <span>format-align-center</span></p></div>

            <div class="col-sm-4" data-name="format-align-justify" tooltip="f23a"><p><i class="zmdi zmdi-format-align-justify zmdi-hc-fw"></i> <span>format-align-justify</span></p></div>

            <div class="col-sm-4" data-name="format-align-left" tooltip="f23b"><p><i class="zmdi zmdi-format-align-left zmdi-hc-fw"></i> <span>format-align-left</span></p></div>

            <div class="col-sm-4" data-name="format-align-right" tooltip="f23c"><p><i class="zmdi zmdi-format-align-right zmdi-hc-fw"></i> <span>format-align-right</span></p></div>

            <div class="col-sm-4" data-name="format-bold" tooltip="f23d"><p><i class="zmdi zmdi-format-bold zmdi-hc-fw"></i> <span>format-bold</span></p></div>

            <div class="col-sm-4" data-name="format-clear-all" tooltip="f23e"><p><i class="zmdi zmdi-format-clear-all zmdi-hc-fw"></i> <span>format-clear-all</span></p></div>

            <div class="col-sm-4" data-name="format-clear" tooltip="f23f"><p><i class="zmdi zmdi-format-clear zmdi-hc-fw"></i> <span>format-clear</span></p></div>

            <div class="col-sm-4" data-name="format-color-fill" tooltip="f240"><p><i class="zmdi zmdi-format-color-fill zmdi-hc-fw"></i> <span>format-color-fill</span></p></div>

            <div class="col-sm-4" data-name="format-color-reset" tooltip="f241"><p><i class="zmdi zmdi-format-color-reset zmdi-hc-fw"></i> <span>format-color-reset</span></p></div>

            <div class="col-sm-4" data-name="format-color-text" tooltip="f242"><p><i class="zmdi zmdi-format-color-text zmdi-hc-fw"></i> <span>format-color-text</span></p></div>

            <div class="col-sm-4" data-name="format-indent-decrease" tooltip="f243"><p><i class="zmdi zmdi-format-indent-decrease zmdi-hc-fw"></i> <span>format-indent-decrease</span></p></div>

            <div class="col-sm-4" data-name="format-indent-increase" tooltip="f244"><p><i class="zmdi zmdi-format-indent-increase zmdi-hc-fw"></i> <span>format-indent-increase</span></p></div>

            <div class="col-sm-4" data-name="format-italic" tooltip="f245"><p><i class="zmdi zmdi-format-italic zmdi-hc-fw"></i> <span>format-italic</span></p></div>

            <div class="col-sm-4" data-name="format-line-spacing" tooltip="f246"><p><i class="zmdi zmdi-format-line-spacing zmdi-hc-fw"></i> <span>format-line-spacing</span></p></div>

            <div class="col-sm-4" data-name="format-list-bulleted" tooltip="f247"><p><i class="zmdi zmdi-format-list-bulleted zmdi-hc-fw"></i> <span>format-list-bulleted</span></p></div>

            <div class="col-sm-4" data-name="format-list-numbered" tooltip="f248"><p><i class="zmdi zmdi-format-list-numbered zmdi-hc-fw"></i> <span>format-list-numbered</span></p></div>

            <div class="col-sm-4" data-name="format-ltr" tooltip="f249"><p><i class="zmdi zmdi-format-ltr zmdi-hc-fw"></i> <span>format-ltr</span></p></div>

            <div class="col-sm-4" data-name="format-rtl" tooltip="f24a"><p><i class="zmdi zmdi-format-rtl zmdi-hc-fw"></i> <span>format-rtl</span></p></div>

            <div class="col-sm-4" data-name="format-size" tooltip="f24b"><p><i class="zmdi zmdi-format-size zmdi-hc-fw"></i> <span>format-size</span></p></div>

            <div class="col-sm-4" data-name="format-strikethrough-s" tooltip="f24c"><p><i class="zmdi zmdi-format-strikethrough-s zmdi-hc-fw"></i> <span>format-strikethrough-s</span></p></div>

            <div class="col-sm-4" data-name="format-strikethrough" tooltip="f24d"><p><i class="zmdi zmdi-format-strikethrough zmdi-hc-fw"></i> <span>format-strikethrough</span></p></div>

            <div class="col-sm-4" data-name="format-subject" tooltip="f24e"><p><i class="zmdi zmdi-format-subject zmdi-hc-fw"></i> <span>format-subject</span></p></div>

            <div class="col-sm-4" data-name="format-underlined" tooltip="f24f"><p><i class="zmdi zmdi-format-underlined zmdi-hc-fw"></i> <span>format-underlined</span></p></div>

            <div class="col-sm-4" data-name="format-valign-bottom" tooltip="f250"><p><i class="zmdi zmdi-format-valign-bottom zmdi-hc-fw"></i> <span>format-valign-bottom</span></p></div>

            <div class="col-sm-4" data-name="format-valign-center" tooltip="f251"><p><i class="zmdi zmdi-format-valign-center zmdi-hc-fw"></i> <span>format-valign-center</span></p></div>

            <div class="col-sm-4" data-name="format-valign-top" tooltip="f252"><p><i class="zmdi zmdi-format-valign-top zmdi-hc-fw"></i> <span>format-valign-top</span></p></div>

            <div class="col-sm-4" data-name="redo" tooltip="f253"><p><i class="zmdi zmdi-redo zmdi-hc-fw"></i> <span>redo</span></p></div>

            <div class="col-sm-4" data-name="select-all" tooltip="f254"><p><i class="zmdi zmdi-select-all zmdi-hc-fw"></i> <span>select-all</span></p></div>

            <div class="col-sm-4" data-name="space-bar" tooltip="f255"><p><i class="zmdi zmdi-space-bar zmdi-hc-fw"></i> <span>space-bar</span></p></div>

            <div class="col-sm-4" data-name="text-format" tooltip="f256"><p><i class="zmdi zmdi-text-format zmdi-hc-fw"></i> <span>text-format</span></p></div>

            <div class="col-sm-4" data-name="transform" tooltip="f257"><p><i class="zmdi zmdi-transform zmdi-hc-fw"></i> <span>transform</span></p></div>

            <div class="col-sm-4" data-name="undo" tooltip="f258"><p><i class="zmdi zmdi-undo zmdi-hc-fw"></i> <span>undo</span></p></div>

            <div class="col-sm-4" data-name="wrap-text" tooltip="f259"><p><i class="zmdi zmdi-wrap-text zmdi-hc-fw"></i> <span>wrap-text</span></p></div>

          </div>
        </div>
      </div>

      <div class="card icons-demo">
        <div class="card-header">
          <h2>Comment</h2>
        </div>

        <div class="card-body card-padding">
          <div class="row">

            <div class="col-sm-4" data-name="comment-alert" tooltip="f25a"><p><i class="zmdi zmdi-comment-alert zmdi-hc-fw"></i> <span>comment-alert</span></p></div>

            <div class="col-sm-4" data-name="comment-alt-text" tooltip="f25b"><p><i class="zmdi zmdi-comment-alt-text zmdi-hc-fw"></i> <span>comment-alt-text</span></p></div>

            <div class="col-sm-4" data-name="comment-alt" tooltip="f25c"><p><i class="zmdi zmdi-comment-alt zmdi-hc-fw"></i> <span>comment-alt</span></p></div>

            <div class="col-sm-4" data-name="comment-edit" tooltip="f25d"><p><i class="zmdi zmdi-comment-edit zmdi-hc-fw"></i> <span>comment-edit</span></p></div>

            <div class="col-sm-4" data-name="comment-image" tooltip="f25e"><p><i class="zmdi zmdi-comment-image zmdi-hc-fw"></i> <span>comment-image</span></p></div>

            <div class="col-sm-4" data-name="comment-list" tooltip="f25f"><p><i class="zmdi zmdi-comment-list zmdi-hc-fw"></i> <span>comment-list</span></p></div>

            <div class="col-sm-4" data-name="comment-more" tooltip="f260"><p><i class="zmdi zmdi-comment-more zmdi-hc-fw"></i> <span>comment-more</span></p></div>

            <div class="col-sm-4" data-name="comment-outline" tooltip="f261"><p><i class="zmdi zmdi-comment-outline zmdi-hc-fw"></i> <span>comment-outline</span></p></div>

            <div class="col-sm-4" data-name="comment-text-alt" tooltip="f262"><p><i class="zmdi zmdi-comment-text-alt zmdi-hc-fw"></i> <span>comment-text-alt</span></p></div>

            <div class="col-sm-4" data-name="comment-text" tooltip="f263"><p><i class="zmdi zmdi-comment-text zmdi-hc-fw"></i> <span>comment-text</span></p></div>

            <div class="col-sm-4" data-name="comment-video" tooltip="f264"><p><i class="zmdi zmdi-comment-video zmdi-hc-fw"></i> <span>comment-video</span></p></div>

            <div class="col-sm-4" data-name="comment" tooltip="f265"><p><i class="zmdi zmdi-comment zmdi-hc-fw"></i> <span>comment</span></p></div>

            <div class="col-sm-4" data-name="comments" tooltip="f266"><p><i class="zmdi zmdi-comments zmdi-hc-fw"></i> <span>comments</span></p></div>

          </div>
        </div>
      </div>

      <div class="card icons-demo">
        <div class="card-header">
          <h2>Form</h2>
        </div>

        <div class="card-body card-padding">
          <div class="row">

            <div class="col-sm-4" data-name="check-all" tooltip="f267"><p><i class="zmdi zmdi-check-all zmdi-hc-fw"></i> <span>check-all</span></p></div>

            <div class="col-sm-4" data-name="check-circle-u" tooltip="f268"><p><i class="zmdi zmdi-check-circle-u zmdi-hc-fw"></i> <span>check-circle-u</span></p></div>

            <div class="col-sm-4" data-name="check-circle" tooltip="f269"><p><i class="zmdi zmdi-check-circle zmdi-hc-fw"></i> <span>check-circle</span></p></div>

            <div class="col-sm-4" data-name="check-square" tooltip="f26a"><p><i class="zmdi zmdi-check-square zmdi-hc-fw"></i> <span>check-square</span></p></div>

            <div class="col-sm-4" data-name="check" tooltip="f26b"><p><i class="zmdi zmdi-check zmdi-hc-fw"></i> <span>check</span></p></div>

            <div class="col-sm-4" data-name="circle-o" tooltip="f26c"><p><i class="zmdi zmdi-circle-o zmdi-hc-fw"></i> <span>circle-o</span></p></div>

            <div class="col-sm-4" data-name="circle" tooltip="f26d"><p><i class="zmdi zmdi-circle zmdi-hc-fw"></i> <span>circle</span></p></div>

            <div class="col-sm-4" data-name="dot-circle-alt" tooltip="f26e"><p><i class="zmdi zmdi-dot-circle-alt zmdi-hc-fw"></i> <span>dot-circle-alt</span></p></div>

            <div class="col-sm-4" data-name="dot-circle" tooltip="f26f"><p><i class="zmdi zmdi-dot-circle zmdi-hc-fw"></i> <span>dot-circle</span></p></div>

            <div class="col-sm-4" data-name="minus-circle-outline" tooltip="f270"><p><i class="zmdi zmdi-minus-circle-outline zmdi-hc-fw"></i> <span>minus-circle-outline</span></p></div>

            <div class="col-sm-4" data-name="minus-circle" tooltip="f271"><p><i class="zmdi zmdi-minus-circle zmdi-hc-fw"></i> <span>minus-circle</span></p></div>

            <div class="col-sm-4" data-name="minus-square" tooltip="f272"><p><i class="zmdi zmdi-minus-square zmdi-hc-fw"></i> <span>minus-square</span></p></div>

            <div class="col-sm-4" data-name="minus" tooltip="f273"><p><i class="zmdi zmdi-minus zmdi-hc-fw"></i> <span>minus</span></p></div>

            <div class="col-sm-4" data-name="plus-circle-o-duplicate" tooltip="f274"><p><i class="zmdi zmdi-plus-circle-o-duplicate zmdi-hc-fw"></i> <span>plus-circle-o-duplicate</span></p></div>

            <div class="col-sm-4" data-name="plus-circle-o" tooltip="f275"><p><i class="zmdi zmdi-plus-circle-o zmdi-hc-fw"></i> <span>plus-circle-o</span></p></div>

            <div class="col-sm-4" data-name="plus-circle" tooltip="f276"><p><i class="zmdi zmdi-plus-circle zmdi-hc-fw"></i> <span>plus-circle</span></p></div>

            <div class="col-sm-4" data-name="plus-square" tooltip="f277"><p><i class="zmdi zmdi-plus-square zmdi-hc-fw"></i> <span>plus-square</span></p></div>

            <div class="col-sm-4" data-name="plus" tooltip="f278"><p><i class="zmdi zmdi-plus zmdi-hc-fw"></i> <span>plus</span></p></div>

            <div class="col-sm-4" data-name="square-o" tooltip="f279"><p><i class="zmdi zmdi-square-o zmdi-hc-fw"></i> <span>square-o</span></p></div>

            <div class="col-sm-4" data-name="star-circle" tooltip="f27a"><p><i class="zmdi zmdi-star-circle zmdi-hc-fw"></i> <span>star-circle</span></p></div>

            <div class="col-sm-4" data-name="star-half" tooltip="f27b"><p><i class="zmdi zmdi-star-half zmdi-hc-fw"></i> <span>star-half</span></p></div>

            <div class="col-sm-4" data-name="star-outline" tooltip="f27c"><p><i class="zmdi zmdi-star-outline zmdi-hc-fw"></i> <span>star-outline</span></p></div>

            <div class="col-sm-4" data-name="star" tooltip="f27d"><p><i class="zmdi zmdi-star zmdi-hc-fw"></i> <span>star</span></p></div>

          </div>
        </div>
      </div>

      <div class="card icons-demo">
        <div class="card-header">
          <h2>Hardware</h2>
        </div>

        <div class="card-body card-padding">
          <div class="row">

            <div class="col-sm-4" data-name="bluetooth-connected" tooltip="f27e"><p><i class="zmdi zmdi-bluetooth-connected zmdi-hc-fw"></i> <span>bluetooth-connected</span></p></div>

            <div class="col-sm-4" data-name="bluetooth-off" tooltip="f27f"><p><i class="zmdi zmdi-bluetooth-off zmdi-hc-fw"></i> <span>bluetooth-off</span></p></div>

            <div class="col-sm-4" data-name="bluetooth-search" tooltip="f280"><p><i class="zmdi zmdi-bluetooth-search zmdi-hc-fw"></i> <span>bluetooth-search</span></p></div>

            <div class="col-sm-4" data-name="bluetooth-setting" tooltip="f281"><p><i class="zmdi zmdi-bluetooth-setting zmdi-hc-fw"></i> <span>bluetooth-setting</span></p></div>

            <div class="col-sm-4" data-name="bluetooth" tooltip="f282"><p><i class="zmdi zmdi-bluetooth zmdi-hc-fw"></i> <span>bluetooth</span></p></div>

            <div class="col-sm-4" data-name="camera-add" tooltip="f283"><p><i class="zmdi zmdi-camera-add zmdi-hc-fw"></i> <span>camera-add</span></p></div>

            <div class="col-sm-4" data-name="camera-alt" tooltip="f284"><p><i class="zmdi zmdi-camera-alt zmdi-hc-fw"></i> <span>camera-alt</span></p></div>

            <div class="col-sm-4" data-name="camera-bw" tooltip="f285"><p><i class="zmdi zmdi-camera-bw zmdi-hc-fw"></i> <span>camera-bw</span></p></div>

            <div class="col-sm-4" data-name="camera-front" tooltip="f286"><p><i class="zmdi zmdi-camera-front zmdi-hc-fw"></i> <span>camera-front</span></p></div>

            <div class="col-sm-4" data-name="camera-mic" tooltip="f287"><p><i class="zmdi zmdi-camera-mic zmdi-hc-fw"></i> <span>camera-mic</span></p></div>

            <div class="col-sm-4" data-name="camera-party-mode" tooltip="f288"><p><i class="zmdi zmdi-camera-party-mode zmdi-hc-fw"></i> <span>camera-party-mode</span></p></div>

            <div class="col-sm-4" data-name="camera-rear" tooltip="f289"><p><i class="zmdi zmdi-camera-rear zmdi-hc-fw"></i> <span>camera-rear</span></p></div>

            <div class="col-sm-4" data-name="camera-roll" tooltip="f28a"><p><i class="zmdi zmdi-camera-roll zmdi-hc-fw"></i> <span>camera-roll</span></p></div>

            <div class="col-sm-4" data-name="camera-switch" tooltip="f28b"><p><i class="zmdi zmdi-camera-switch zmdi-hc-fw"></i> <span>camera-switch</span></p></div>

            <div class="col-sm-4" data-name="camera" tooltip="f28c"><p><i class="zmdi zmdi-camera zmdi-hc-fw"></i> <span>camera</span></p></div>

            <div class="col-sm-4" data-name="card-alert" tooltip="f28d"><p><i class="zmdi zmdi-card-alert zmdi-hc-fw"></i> <span>card-alert</span></p></div>

            <div class="col-sm-4" data-name="card-off" tooltip="f28e"><p><i class="zmdi zmdi-card-off zmdi-hc-fw"></i> <span>card-off</span></p></div>

            <div class="col-sm-4" data-name="card-sd" tooltip="f28f"><p><i class="zmdi zmdi-card-sd zmdi-hc-fw"></i> <span>card-sd</span></p></div>

            <div class="col-sm-4" data-name="card-sim" tooltip="f290"><p><i class="zmdi zmdi-card-sim zmdi-hc-fw"></i> <span>card-sim</span></p></div>

            <div class="col-sm-4" data-name="desktop-mac" tooltip="f291"><p><i class="zmdi zmdi-desktop-mac zmdi-hc-fw"></i> <span>desktop-mac</span></p></div>

            <div class="col-sm-4" data-name="desktop-windows" tooltip="f292"><p><i class="zmdi zmdi-desktop-windows zmdi-hc-fw"></i> <span>desktop-windows</span></p></div>

            <div class="col-sm-4" data-name="device-hub" tooltip="f293"><p><i class="zmdi zmdi-device-hub zmdi-hc-fw"></i> <span>device-hub</span></p></div>

            <div class="col-sm-4" data-name="devices-off" tooltip="f294"><p><i class="zmdi zmdi-devices-off zmdi-hc-fw"></i> <span>devices-off</span></p></div>

            <div class="col-sm-4" data-name="devices" tooltip="f295"><p><i class="zmdi zmdi-devices zmdi-hc-fw"></i> <span>devices</span></p></div>

            <div class="col-sm-4" data-name="dock" tooltip="f296"><p><i class="zmdi zmdi-dock zmdi-hc-fw"></i> <span>dock</span></p></div>

            <div class="col-sm-4" data-name="floppy" tooltip="f297"><p><i class="zmdi zmdi-floppy zmdi-hc-fw"></i> <span>floppy</span></p></div>

            <div class="col-sm-4" data-name="gamepad" tooltip="f298"><p><i class="zmdi zmdi-gamepad zmdi-hc-fw"></i> <span>gamepad</span></p></div>

            <div class="col-sm-4" data-name="gps-dot" tooltip="f299"><p><i class="zmdi zmdi-gps-dot zmdi-hc-fw"></i> <span>gps-dot</span></p></div>

            <div class="col-sm-4" data-name="gps-off" tooltip="f29a"><p><i class="zmdi zmdi-gps-off zmdi-hc-fw"></i> <span>gps-off</span></p></div>

            <div class="col-sm-4" data-name="gps" tooltip="f29b"><p><i class="zmdi zmdi-gps zmdi-hc-fw"></i> <span>gps</span></p></div>

            <div class="col-sm-4" data-name="headset-mic" tooltip="f29c"><p><i class="zmdi zmdi-headset-mic zmdi-hc-fw"></i> <span>headset-mic</span></p></div>

            <div class="col-sm-4" data-name="headset" tooltip="f29d"><p><i class="zmdi zmdi-headset zmdi-hc-fw"></i> <span>headset</span></p></div>

            <div class="col-sm-4" data-name="input-antenna" tooltip="f29e"><p><i class="zmdi zmdi-input-antenna zmdi-hc-fw"></i> <span>input-antenna</span></p></div>

            <div class="col-sm-4" data-name="input-composite" tooltip="f29f"><p><i class="zmdi zmdi-input-composite zmdi-hc-fw"></i> <span>input-composite</span></p></div>

            <div class="col-sm-4" data-name="input-hdmi" tooltip="f2a0"><p><i class="zmdi zmdi-input-hdmi zmdi-hc-fw"></i> <span>input-hdmi</span></p></div>

            <div class="col-sm-4" data-name="input-power" tooltip="f2a1"><p><i class="zmdi zmdi-input-power zmdi-hc-fw"></i> <span>input-power</span></p></div>

            <div class="col-sm-4" data-name="input-svideo" tooltip="f2a2"><p><i class="zmdi zmdi-input-svideo zmdi-hc-fw"></i> <span>input-svideo</span></p></div>

            <div class="col-sm-4" data-name="keyboard-hide" tooltip="f2a3"><p><i class="zmdi zmdi-keyboard-hide zmdi-hc-fw"></i> <span>keyboard-hide</span></p></div>

            <div class="col-sm-4" data-name="keyboard" tooltip="f2a4"><p><i class="zmdi zmdi-keyboard zmdi-hc-fw"></i> <span>keyboard</span></p></div>

            <div class="col-sm-4" data-name="laptop-chromebook" tooltip="f2a5"><p><i class="zmdi zmdi-laptop-chromebook zmdi-hc-fw"></i> <span>laptop-chromebook</span></p></div>

            <div class="col-sm-4" data-name="laptop-mac" tooltip="f2a6"><p><i class="zmdi zmdi-laptop-mac zmdi-hc-fw"></i> <span>laptop-mac</span></p></div>

            <div class="col-sm-4" data-name="laptop" tooltip="f2a7"><p><i class="zmdi zmdi-laptop zmdi-hc-fw"></i> <span>laptop</span></p></div>

            <div class="col-sm-4" data-name="mic-off" tooltip="f2a8"><p><i class="zmdi zmdi-mic-off zmdi-hc-fw"></i> <span>mic-off</span></p></div>

            <div class="col-sm-4" data-name="mic-outline" tooltip="f2a9"><p><i class="zmdi zmdi-mic-outline zmdi-hc-fw"></i> <span>mic-outline</span></p></div>

            <div class="col-sm-4" data-name="mic-setting" tooltip="f2aa"><p><i class="zmdi zmdi-mic-setting zmdi-hc-fw"></i> <span>mic-setting</span></p></div>

            <div class="col-sm-4" data-name="mic" tooltip="f2ab"><p><i class="zmdi zmdi-mic zmdi-hc-fw"></i> <span>mic</span></p></div>

            <div class="col-sm-4" data-name="mouse" tooltip="f2ac"><p><i class="zmdi zmdi-mouse zmdi-hc-fw"></i> <span>mouse</span></p></div>

            <div class="col-sm-4" data-name="network-alert" tooltip="f2ad"><p><i class="zmdi zmdi-network-alert zmdi-hc-fw"></i> <span>network-alert</span></p></div>

            <div class="col-sm-4" data-name="network-locked" tooltip="f2ae"><p><i class="zmdi zmdi-network-locked zmdi-hc-fw"></i> <span>network-locked</span></p></div>

            <div class="col-sm-4" data-name="network-off" tooltip="f2af"><p><i class="zmdi zmdi-network-off zmdi-hc-fw"></i> <span>network-off</span></p></div>

            <div class="col-sm-4" data-name="network-outline" tooltip="f2b0"><p><i class="zmdi zmdi-network-outline zmdi-hc-fw"></i> <span>network-outline</span></p></div>

            <div class="col-sm-4" data-name="network-setting" tooltip="f2b1"><p><i class="zmdi zmdi-network-setting zmdi-hc-fw"></i> <span>network-setting</span></p></div>

            <div class="col-sm-4" data-name="network" tooltip="f2b2"><p><i class="zmdi zmdi-network zmdi-hc-fw"></i> <span>network</span></p></div>

            <div class="col-sm-4" data-name="phone-bluetooth" tooltip="f2b3"><p><i class="zmdi zmdi-phone-bluetooth zmdi-hc-fw"></i> <span>phone-bluetooth</span></p></div>

            <div class="col-sm-4" data-name="phone-end" tooltip="f2b4"><p><i class="zmdi zmdi-phone-end zmdi-hc-fw"></i> <span>phone-end</span></p></div>

            <div class="col-sm-4" data-name="phone-forwarded" tooltip="f2b5"><p><i class="zmdi zmdi-phone-forwarded zmdi-hc-fw"></i> <span>phone-forwarded</span></p></div>

            <div class="col-sm-4" data-name="phone-in-talk" tooltip="f2b6"><p><i class="zmdi zmdi-phone-in-talk zmdi-hc-fw"></i> <span>phone-in-talk</span></p></div>

            <div class="col-sm-4" data-name="phone-locked" tooltip="f2b7"><p><i class="zmdi zmdi-phone-locked zmdi-hc-fw"></i> <span>phone-locked</span></p></div>

            <div class="col-sm-4" data-name="phone-missed" tooltip="f2b8"><p><i class="zmdi zmdi-phone-missed zmdi-hc-fw"></i> <span>phone-missed</span></p></div>

            <div class="col-sm-4" data-name="phone-msg" tooltip="f2b9"><p><i class="zmdi zmdi-phone-msg zmdi-hc-fw"></i> <span>phone-msg</span></p></div>

            <div class="col-sm-4" data-name="phone-paused" tooltip="f2ba"><p><i class="zmdi zmdi-phone-paused zmdi-hc-fw"></i> <span>phone-paused</span></p></div>

            <div class="col-sm-4" data-name="phone-ring" tooltip="f2bb"><p><i class="zmdi zmdi-phone-ring zmdi-hc-fw"></i> <span>phone-ring</span></p></div>

            <div class="col-sm-4" data-name="phone-setting" tooltip="f2bc"><p><i class="zmdi zmdi-phone-setting zmdi-hc-fw"></i> <span>phone-setting</span></p></div>

            <div class="col-sm-4" data-name="phone-sip" tooltip="f2bd"><p><i class="zmdi zmdi-phone-sip zmdi-hc-fw"></i> <span>phone-sip</span></p></div>

            <div class="col-sm-4" data-name="phone" tooltip="f2be"><p><i class="zmdi zmdi-phone zmdi-hc-fw"></i> <span>phone</span></p></div>

            <div class="col-sm-4" data-name="portable-wifi-changes" tooltip="f2bf"><p><i class="zmdi zmdi-portable-wifi-changes zmdi-hc-fw"></i> <span>portable-wifi-changes</span></p></div>

            <div class="col-sm-4" data-name="portable-wifi-off" tooltip="f2c0"><p><i class="zmdi zmdi-portable-wifi-off zmdi-hc-fw"></i> <span>portable-wifi-off</span></p></div>

            <div class="col-sm-4" data-name="portable-wifi" tooltip="f2c1"><p><i class="zmdi zmdi-portable-wifi zmdi-hc-fw"></i> <span>portable-wifi</span></p></div>

            <div class="col-sm-4" data-name="radio" tooltip="f2c2"><p><i class="zmdi zmdi-radio zmdi-hc-fw"></i> <span>radio</span></p></div>

            <div class="col-sm-4" data-name="reader" tooltip="f2c3"><p><i class="zmdi zmdi-reader zmdi-hc-fw"></i> <span>reader</span></p></div>

            <div class="col-sm-4" data-name="remote-control-alt" tooltip="f2c4"><p><i class="zmdi zmdi-remote-control-alt zmdi-hc-fw"></i> <span>remote-control-alt</span></p></div>

            <div class="col-sm-4" data-name="remote-control" tooltip="f2c5"><p><i class="zmdi zmdi-remote-control zmdi-hc-fw"></i> <span>remote-control</span></p></div>

            <div class="col-sm-4" data-name="router" tooltip="f2c6"><p><i class="zmdi zmdi-router zmdi-hc-fw"></i> <span>router</span></p></div>

            <div class="col-sm-4" data-name="scanner" tooltip="f2c7"><p><i class="zmdi zmdi-scanner zmdi-hc-fw"></i> <span>scanner</span></p></div>

            <div class="col-sm-4" data-name="smartphone-android" tooltip="f2c8"><p><i class="zmdi zmdi-smartphone-android zmdi-hc-fw"></i> <span>smartphone-android</span></p></div>

            <div class="col-sm-4" data-name="smartphone-download" tooltip="f2c9"><p><i class="zmdi zmdi-smartphone-download zmdi-hc-fw"></i> <span>smartphone-download</span></p></div>

            <div class="col-sm-4" data-name="smartphone-erase" tooltip="f2ca"><p><i class="zmdi zmdi-smartphone-erase zmdi-hc-fw"></i> <span>smartphone-erase</span></p></div>

            <div class="col-sm-4" data-name="smartphone-info" tooltip="f2cb"><p><i class="zmdi zmdi-smartphone-info zmdi-hc-fw"></i> <span>smartphone-info</span></p></div>

            <div class="col-sm-4" data-name="smartphone-iphone" tooltip="f2cc"><p><i class="zmdi zmdi-smartphone-iphone zmdi-hc-fw"></i> <span>smartphone-iphone</span></p></div>

            <div class="col-sm-4" data-name="smartphone-landscape-lock" tooltip="f2cd"><p><i class="zmdi zmdi-smartphone-landscape-lock zmdi-hc-fw"></i> <span>smartphone-landscape-lock</span></p></div>

            <div class="col-sm-4" data-name="smartphone-landscape" tooltip="f2ce"><p><i class="zmdi zmdi-smartphone-landscape zmdi-hc-fw"></i> <span>smartphone-landscape</span></p></div>

            <div class="col-sm-4" data-name="smartphone-lock" tooltip="f2cf"><p><i class="zmdi zmdi-smartphone-lock zmdi-hc-fw"></i> <span>smartphone-lock</span></p></div>

            <div class="col-sm-4" data-name="smartphone-portrait-lock" tooltip="f2d0"><p><i class="zmdi zmdi-smartphone-portrait-lock zmdi-hc-fw"></i> <span>smartphone-portrait-lock</span></p></div>

            <div class="col-sm-4" data-name="smartphone-ring" tooltip="f2d1"><p><i class="zmdi zmdi-smartphone-ring zmdi-hc-fw"></i> <span>smartphone-ring</span></p></div>

            <div class="col-sm-4" data-name="smartphone-setting" tooltip="f2d2"><p><i class="zmdi zmdi-smartphone-setting zmdi-hc-fw"></i> <span>smartphone-setting</span></p></div>

            <div class="col-sm-4" data-name="smartphone-setup" tooltip="f2d3"><p><i class="zmdi zmdi-smartphone-setup zmdi-hc-fw"></i> <span>smartphone-setup</span></p></div>

            <div class="col-sm-4" data-name="smartphone" tooltip="f2d4"><p><i class="zmdi zmdi-smartphone zmdi-hc-fw"></i> <span>smartphone</span></p></div>

            <div class="col-sm-4" data-name="speaker" tooltip="f2d5"><p><i class="zmdi zmdi-speaker zmdi-hc-fw"></i> <span>speaker</span></p></div>

            <div class="col-sm-4" data-name="tablet-android" tooltip="f2d6"><p><i class="zmdi zmdi-tablet-android zmdi-hc-fw"></i> <span>tablet-android</span></p></div>

            <div class="col-sm-4" data-name="tablet-mac" tooltip="f2d7"><p><i class="zmdi zmdi-tablet-mac zmdi-hc-fw"></i> <span>tablet-mac</span></p></div>

            <div class="col-sm-4" data-name="tablet" tooltip="f2d8"><p><i class="zmdi zmdi-tablet zmdi-hc-fw"></i> <span>tablet</span></p></div>

            <div class="col-sm-4" data-name="tv-alt-play" tooltip="f2d9"><p><i class="zmdi zmdi-tv-alt-play zmdi-hc-fw"></i> <span>tv-alt-play</span></p></div>

            <div class="col-sm-4" data-name="tv-list" tooltip="f2da"><p><i class="zmdi zmdi-tv-list zmdi-hc-fw"></i> <span>tv-list</span></p></div>

            <div class="col-sm-4" data-name="tv-play" tooltip="f2db"><p><i class="zmdi zmdi-tv-play zmdi-hc-fw"></i> <span>tv-play</span></p></div>

            <div class="col-sm-4" data-name="tv" tooltip="f2dc"><p><i class="zmdi zmdi-tv zmdi-hc-fw"></i> <span>tv</span></p></div>

            <div class="col-sm-4" data-name="usb" tooltip="f2dd"><p><i class="zmdi zmdi-usb zmdi-hc-fw"></i> <span>usb</span></p></div>

            <div class="col-sm-4" data-name="videocam-off" tooltip="f2de"><p><i class="zmdi zmdi-videocam-off zmdi-hc-fw"></i> <span>videocam-off</span></p></div>

            <div class="col-sm-4" data-name="videocam-switch" tooltip="f2df"><p><i class="zmdi zmdi-videocam-switch zmdi-hc-fw"></i> <span>videocam-switch</span></p></div>

            <div class="col-sm-4" data-name="videocam" tooltip="f2e0"><p><i class="zmdi zmdi-videocam zmdi-hc-fw"></i> <span>videocam</span></p></div>

            <div class="col-sm-4" data-name="watch" tooltip="f2e1"><p><i class="zmdi zmdi-watch zmdi-hc-fw"></i> <span>watch</span></p></div>

            <div class="col-sm-4" data-name="wifi-alt-2" tooltip="f2e2"><p><i class="zmdi zmdi-wifi-alt-2 zmdi-hc-fw"></i> <span>wifi-alt-2</span></p></div>

            <div class="col-sm-4" data-name="wifi-alt" tooltip="f2e3"><p><i class="zmdi zmdi-wifi-alt zmdi-hc-fw"></i> <span>wifi-alt</span></p></div>

            <div class="col-sm-4" data-name="wifi-info" tooltip="f2e4"><p><i class="zmdi zmdi-wifi-info zmdi-hc-fw"></i> <span>wifi-info</span></p></div>

            <div class="col-sm-4" data-name="wifi-lock" tooltip="f2e5"><p><i class="zmdi zmdi-wifi-lock zmdi-hc-fw"></i> <span>wifi-lock</span></p></div>

            <div class="col-sm-4" data-name="wifi-off" tooltip="f2e6"><p><i class="zmdi zmdi-wifi-off zmdi-hc-fw"></i> <span>wifi-off</span></p></div>

            <div class="col-sm-4" data-name="wifi-outline" tooltip="f2e7"><p><i class="zmdi zmdi-wifi-outline zmdi-hc-fw"></i> <span>wifi-outline</span></p></div>

            <div class="col-sm-4" data-name="wifi" tooltip="f2e8"><p><i class="zmdi zmdi-wifi zmdi-hc-fw"></i> <span>wifi</span></p></div>

          </div>
        </div>
      </div>

      <div class="card icons-demo">
        <div class="card-header">
          <h2>Directional</h2>
        </div>

        <div class="card-body card-padding">
          <div class="row">

            <div class="col-sm-4" data-name="arrow-left-bottom" tooltip="f2e9"><p><i class="zmdi zmdi-arrow-left-bottom zmdi-hc-fw"></i> <span>arrow-left-bottom</span></p></div>

            <div class="col-sm-4" data-name="arrow-left" tooltip="f2ea"><p><i class="zmdi zmdi-arrow-left zmdi-hc-fw"></i> <span>arrow-left</span></p></div>

            <div class="col-sm-4" data-name="arrow-merge" tooltip="f2eb"><p><i class="zmdi zmdi-arrow-merge zmdi-hc-fw"></i> <span>arrow-merge</span></p></div>

            <div class="col-sm-4" data-name="arrow-missed" tooltip="f2ec"><p><i class="zmdi zmdi-arrow-missed zmdi-hc-fw"></i> <span>arrow-missed</span></p></div>

            <div class="col-sm-4" data-name="arrow-right-top" tooltip="f2ed"><p><i class="zmdi zmdi-arrow-right-top zmdi-hc-fw"></i> <span>arrow-right-top</span></p></div>

            <div class="col-sm-4" data-name="arrow-right" tooltip="f2ee"><p><i class="zmdi zmdi-arrow-right zmdi-hc-fw"></i> <span>arrow-right</span></p></div>

            <div class="col-sm-4" data-name="arrow-split" tooltip="f2ef"><p><i class="zmdi zmdi-arrow-split zmdi-hc-fw"></i> <span>arrow-split</span></p></div>

            <div class="col-sm-4" data-name="arrows" tooltip="f2f0"><p><i class="zmdi zmdi-arrows zmdi-hc-fw"></i> <span>arrows</span></p></div>

            <div class="col-sm-4" data-name="caret-down-circle" tooltip="f2f1"><p><i class="zmdi zmdi-caret-down-circle zmdi-hc-fw"></i> <span>caret-down-circle</span></p></div>

            <div class="col-sm-4" data-name="caret-down" tooltip="f2f2"><p><i class="zmdi zmdi-caret-down zmdi-hc-fw"></i> <span>caret-down</span></p></div>

            <div class="col-sm-4" data-name="caret-left-circle" tooltip="f2f3"><p><i class="zmdi zmdi-caret-left-circle zmdi-hc-fw"></i> <span>caret-left-circle</span></p></div>

            <div class="col-sm-4" data-name="caret-left" tooltip="f2f4"><p><i class="zmdi zmdi-caret-left zmdi-hc-fw"></i> <span>caret-left</span></p></div>

            <div class="col-sm-4" data-name="caret-right-circle" tooltip="f2f5"><p><i class="zmdi zmdi-caret-right-circle zmdi-hc-fw"></i> <span>caret-right-circle</span></p></div>

            <div class="col-sm-4" data-name="caret-right" tooltip="f2f6"><p><i class="zmdi zmdi-caret-right zmdi-hc-fw"></i> <span>caret-right</span></p></div>

            <div class="col-sm-4" data-name="caret-up-circle" tooltip="f2f7"><p><i class="zmdi zmdi-caret-up-circle zmdi-hc-fw"></i> <span>caret-up-circle</span></p></div>

            <div class="col-sm-4" data-name="caret-up" tooltip="f2f8"><p><i class="zmdi zmdi-caret-up zmdi-hc-fw"></i> <span>caret-up</span></p></div>

            <div class="col-sm-4" data-name="chevron-down" tooltip="f2f9"><p><i class="zmdi zmdi-chevron-down zmdi-hc-fw"></i> <span>chevron-down</span></p></div>

            <div class="col-sm-4" data-name="chevron-left" tooltip="f2fa"><p><i class="zmdi zmdi-chevron-left zmdi-hc-fw"></i> <span>chevron-left</span></p></div>

            <div class="col-sm-4" data-name="chevron-right" tooltip="f2fb"><p><i class="zmdi zmdi-chevron-right zmdi-hc-fw"></i> <span>chevron-right</span></p></div>

            <div class="col-sm-4" data-name="chevron-up" tooltip="f2fc"><p><i class="zmdi zmdi-chevron-up zmdi-hc-fw"></i> <span>chevron-up</span></p></div>

            <div class="col-sm-4" data-name="forward" tooltip="f2fd"><p><i class="zmdi zmdi-forward zmdi-hc-fw"></i> <span>forward</span></p></div>

            <div class="col-sm-4" data-name="long-arrow-down" tooltip="f2fe"><p><i class="zmdi zmdi-long-arrow-down zmdi-hc-fw"></i> <span>long-arrow-down</span></p></div>

            <div class="col-sm-4" data-name="long-arrow-left" tooltip="f2ff"><p><i class="zmdi zmdi-long-arrow-left zmdi-hc-fw"></i> <span>long-arrow-left</span></p></div>

            <div class="col-sm-4" data-name="long-arrow-return" tooltip="f300"><p><i class="zmdi zmdi-long-arrow-return zmdi-hc-fw"></i> <span>long-arrow-return</span></p></div>

            <div class="col-sm-4" data-name="long-arrow-right" tooltip="f301"><p><i class="zmdi zmdi-long-arrow-right zmdi-hc-fw"></i> <span>long-arrow-right</span></p></div>

            <div class="col-sm-4" data-name="long-arrow-tab" tooltip="f302"><p><i class="zmdi zmdi-long-arrow-tab zmdi-hc-fw"></i> <span>long-arrow-tab</span></p></div>

            <div class="col-sm-4" data-name="long-arrow-up" tooltip="f303"><p><i class="zmdi zmdi-long-arrow-up zmdi-hc-fw"></i> <span>long-arrow-up</span></p></div>

            <div class="col-sm-4" data-name="rotate-ccw" tooltip="f304"><p><i class="zmdi zmdi-rotate-ccw zmdi-hc-fw"></i> <span>rotate-ccw</span></p></div>

            <div class="col-sm-4" data-name="rotate-cw" tooltip="f305"><p><i class="zmdi zmdi-rotate-cw zmdi-hc-fw"></i> <span>rotate-cw</span></p></div>

            <div class="col-sm-4" data-name="rotate-left" tooltip="f306"><p><i class="zmdi zmdi-rotate-left zmdi-hc-fw"></i> <span>rotate-left</span></p></div>

            <div class="col-sm-4" data-name="rotate-right" tooltip="f307"><p><i class="zmdi zmdi-rotate-right zmdi-hc-fw"></i> <span>rotate-right</span></p></div>

            <div class="col-sm-4" data-name="square-down" tooltip="f308"><p><i class="zmdi zmdi-square-down zmdi-hc-fw"></i> <span>square-down</span></p></div>

            <div class="col-sm-4" data-name="square-right" tooltip="f309"><p><i class="zmdi zmdi-square-right zmdi-hc-fw"></i> <span>square-right</span></p></div>

            <div class="col-sm-4" data-name="swap-alt" tooltip="f30a"><p><i class="zmdi zmdi-swap-alt zmdi-hc-fw"></i> <span>swap-alt</span></p></div>

            <div class="col-sm-4" data-name="swap-vertical-circle" tooltip="f30b"><p><i class="zmdi zmdi-swap-vertical-circle zmdi-hc-fw"></i> <span>swap-vertical-circle</span></p></div>

            <div class="col-sm-4" data-name="swap-vertical" tooltip="f30c"><p><i class="zmdi zmdi-swap-vertical zmdi-hc-fw"></i> <span>swap-vertical</span></p></div>

            <div class="col-sm-4" data-name="swap" tooltip="f30d"><p><i class="zmdi zmdi-swap zmdi-hc-fw"></i> <span>swap</span></p></div>

            <div class="col-sm-4" data-name="trending-down" tooltip="f30e"><p><i class="zmdi zmdi-trending-down zmdi-hc-fw"></i> <span>trending-down</span></p></div>

            <div class="col-sm-4" data-name="trending-flat" tooltip="f30f"><p><i class="zmdi zmdi-trending-flat zmdi-hc-fw"></i> <span>trending-flat</span></p></div>

            <div class="col-sm-4" data-name="trending-up" tooltip="f310"><p><i class="zmdi zmdi-trending-up zmdi-hc-fw"></i> <span>trending-up</span></p></div>

            <div class="col-sm-4" data-name="unfold-less" tooltip="f311"><p><i class="zmdi zmdi-unfold-less zmdi-hc-fw"></i> <span>unfold-less</span></p></div>

            <div class="col-sm-4" data-name="unfold-more" tooltip="f312"><p><i class="zmdi zmdi-unfold-more zmdi-hc-fw"></i> <span>unfold-more</span></p></div>

          </div>
        </div>
      </div>

      <div class="card icons-demo">
        <div class="card-header">
          <h2>Map (aliases)</h2>
        </div>

        <div class="card-body card-padding">
          <div class="row">
            <div class="col-sm-4" data-name="bike" tooltip="f117"><p><i class="zmdi zmdi-directions-bike zmdi-hc-fw"></i> zmdi-directions-bike</p></div>

            <div class="col-sm-4" data-name="boat" tooltip="f11a"><p><i class="zmdi zmdi-directions-boat zmdi-hc-fw"></i> zmdi-directions-boat</p></div>

            <div class="col-sm-4" data-name="bus" tooltip="f121"><p><i class="zmdi zmdi-directions-bus zmdi-hc-fw"></i> zmdi-directions-bus</p></div>

            <div class="col-sm-4" data-name="car" tooltip="f125"><p><i class="zmdi zmdi-directions-car zmdi-hc-fw"></i> zmdi-directions-car</p></div>

            <div class="col-sm-4" data-name="railway" tooltip="f1b3"><p><i class="zmdi zmdi-directions-railway zmdi-hc-fw"></i> zmdi-directions-railway</p></div>

            <div class="col-sm-4" data-name="run" tooltip="f215"><p><i class="zmdi zmdi-directions-run zmdi-hc-fw"></i> zmdi-directions-run</p></div>

            <div class="col-sm-4" data-name="subway" tooltip="f1d5"><p><i class="zmdi zmdi-directions-subway zmdi-hc-fw"></i> zmdi-directions-subway</p></div>

            <div class="col-sm-4" data-name="walk" tooltip="f216"><p><i class="zmdi zmdi-directions-walk zmdi-hc-fw"></i> zmdi-directions-walk</p></div>

            <div class="col-sm-4" data-name="turning-sign" tooltip="f1e7"><p><i class="zmdi zmdi-directions zmdi-hc-fw"></i> zmdi-directions</p></div>

            <div class="col-sm-4" data-name="layers-off" tooltip="f18b"><p><i class="zmdi zmdi-layers-off zmdi-hc-fw"></i> zmdi-layers-off</p></div>

            <div class="col-sm-4" data-name="layers" tooltip="f18c"><p><i class="zmdi zmdi-layers zmdi-hc-fw"></i> zmdi-layers</p></div>

            <div class="col-sm-4" data-name="ticket-star" tooltip="f1df"><p><i class="zmdi zmdi-local-activity zmdi-hc-fw"></i> zmdi-local-activity</p></div>

            <div class="col-sm-4" data-name="airplane" tooltip="f103"><p><i class="zmdi zmdi-local-airport zmdi-hc-fw"></i> zmdi-local-airport</p></div>

            <div class="col-sm-4" data-name="money-box" tooltip="f198"><p><i class="zmdi zmdi-local-atm zmdi-hc-fw"></i> zmdi-local-atm</p></div>

            <div class="col-sm-4" data-name="cocktail" tooltip="f137"><p><i class="zmdi zmdi-local-bar zmdi-hc-fw"></i> zmdi-local-bar</p></div>

            <div class="col-sm-4" data-name="coffee" tooltip="f13b"><p><i class="zmdi zmdi-local-cafe zmdi-hc-fw"></i> zmdi-local-cafe</p></div>

            <div class="col-sm-4" data-name="car-wash" tooltip="f124"><p><i class="zmdi zmdi-local-car-wash zmdi-hc-fw"></i> zmdi-local-car-wash</p></div>

            <div class="col-sm-4" data-name="store-24" tooltip="f1d3"><p><i class="zmdi zmdi-local-convenience-store zmdi-hc-fw"></i> zmdi-local-convenience-store</p></div>

            <div class="col-sm-4" data-name="cutlery" tooltip="f153"><p><i class="zmdi zmdi-local-dining zmdi-hc-fw"></i> zmdi-local-dining</p></div>

            <div class="col-sm-4" data-name="drink" tooltip="f157"><p><i class="zmdi zmdi-local-drink zmdi-hc-fw"></i> zmdi-local-drink</p></div>

            <div class="col-sm-4" data-name="flower-alt" tooltip="f168"><p><i class="zmdi zmdi-local-florist zmdi-hc-fw"></i> zmdi-local-florist</p></div>

            <div class="col-sm-4" data-name="gas-station" tooltip="f16f"><p><i class="zmdi zmdi-local-gas-station zmdi-hc-fw"></i> zmdi-local-gas-station</p></div>

            <div class="col-sm-4" data-name="shopping-cart" tooltip="f1cb"><p><i class="zmdi zmdi-local-grocery-store zmdi-hc-fw"></i> zmdi-local-grocery-store</p></div>

            <div class="col-sm-4" data-name="hospital" tooltip="f177"><p><i class="zmdi zmdi-local-hospital zmdi-hc-fw"></i> zmdi-local-hospital</p></div>

            <div class="col-sm-4" data-name="hotel" tooltip="f178"><p><i class="zmdi zmdi-local-hotel zmdi-hc-fw"></i> zmdi-local-hotel</p></div>

            <div class="col-sm-4" data-name="washing-machine" tooltip="f1e9"><p><i class="zmdi zmdi-local-laundry-service zmdi-hc-fw"></i> zmdi-local-laundry-service</p></div>

            <div class="col-sm-4" data-name="library" tooltip="f18d"><p><i class="zmdi zmdi-local-library zmdi-hc-fw"></i> zmdi-local-library</p></div>

            <div class="col-sm-4" data-name="mall" tooltip="f195"><p><i class="zmdi zmdi-local-mall zmdi-hc-fw"></i> zmdi-local-mall</p></div>

            <div class="col-sm-4" data-name="movie-alt" tooltip="f19d"><p><i class="zmdi zmdi-local-movies zmdi-hc-fw"></i> zmdi-local-movies</p></div>

            <div class="col-sm-4" data-name="label" tooltip="f187"><p><i class="zmdi zmdi-local-offer zmdi-hc-fw"></i> zmdi-local-offer</p></div>

            <div class="col-sm-4" data-name="parking" tooltip="f1a5"><p><i class="zmdi zmdi-local-parking zmdi-hc-fw"></i> zmdi-local-parking</p></div>

            <div class="col-sm-4" data-name="hospital-alt" tooltip="f176"><p><i class="zmdi zmdi-local-pharmacy zmdi-hc-fw"></i> zmdi-local-pharmacy</p></div>

            <div class="col-sm-4" data-name="phone" tooltip="f2be"><p><i class="zmdi zmdi-local-phone zmdi-hc-fw"></i> zmdi-local-phone</p></div>

            <div class="col-sm-4" data-name="pizza" tooltip="f1ac"><p><i class="zmdi zmdi-local-pizza zmdi-hc-fw"></i> zmdi-local-pizza</p></div>

            <div class="col-sm-4" data-name="ticket-star" tooltip="f1df"><p><i class="zmdi zmdi-local-activity zmdi-hc-fw"></i> zmdi-local-activity</p></div>

            <div class="col-sm-4" data-name="email" tooltip="f15a"><p><i class="zmdi zmdi-local-post-office zmdi-hc-fw"></i> zmdi-local-post-office</p></div>

            <div class="col-sm-4" data-name="print" tooltip="f1b0"><p><i class="zmdi zmdi-local-printshop zmdi-hc-fw"></i> zmdi-local-printshop</p></div>

            <div class="col-sm-4" data-name="camera" tooltip="f28c"><p><i class="zmdi zmdi-local-see zmdi-hc-fw"></i> zmdi-local-see</p></div>

            <div class="col-sm-4" data-name="truck" tooltip="f1e6"><p><i class="zmdi zmdi-local-shipping zmdi-hc-fw"></i> zmdi-local-shipping</p></div>

            <div class="col-sm-4" data-name="store" tooltip="f1d4"><p><i class="zmdi zmdi-local-store zmdi-hc-fw"></i> zmdi-local-store</p></div>

            <div class="col-sm-4" data-name="car-taxi" tooltip="f123"><p><i class="zmdi zmdi-local-taxi zmdi-hc-fw"></i> zmdi-local-taxi</p></div>

            <div class="col-sm-4" data-name="male-female" tooltip="f211"><p><i class="zmdi zmdi-local-wc zmdi-hc-fw"></i> zmdi-local-wc</p></div>

            <div class="col-sm-4" data-name="map" tooltip="f196"><p><i class="zmdi zmdi-map zmdi-hc-fw"></i> zmdi-map</p></div>

            <div class="col-sm-4" data-name="gps-dot" tooltip="f299"><p><i class="zmdi zmdi-my-location zmdi-hc-fw"></i> zmdi-my-location</p></div>

            <div class="col-sm-4" data-name="nature-people" tooltip="f19f"><p><i class="zmdi zmdi-nature-people zmdi-hc-fw"></i> zmdi-nature-people</p></div>

            <div class="col-sm-4" data-name="nature" tooltip="f1a0"><p><i class="zmdi zmdi-nature zmdi-hc-fw"></i> zmdi-nature</p></div>

            <div class="col-sm-4" data-name="navigation" tooltip="f1a1"><p><i class="zmdi zmdi-navigation zmdi-hc-fw"></i> zmdi-navigation</p></div>

            <div class="col-sm-4" data-name="pin-account" tooltip="f1a6"><p><i class="zmdi zmdi-pin-account zmdi-hc-fw"></i> zmdi-pin-account</p></div>

            <div class="col-sm-4" data-name="pin-assistant" tooltip="f1a7"><p><i class="zmdi zmdi-pin-assistant zmdi-hc-fw"></i> zmdi-pin-assistant</p></div>

            <div class="col-sm-4" data-name="pin-drop" tooltip="f1a8"><p><i class="zmdi zmdi-pin-drop zmdi-hc-fw"></i> zmdi-pin-drop</p></div>

            <div class="col-sm-4" data-name="pin-help" tooltip="f1a9"><p><i class="zmdi zmdi-pin-help zmdi-hc-fw"></i> zmdi-pin-help</p></div>

            <div class="col-sm-4" data-name="pin-off" tooltip="f1aa"><p><i class="zmdi zmdi-pin-off zmdi-hc-fw"></i> zmdi-pin-off</p></div>

            <div class="col-sm-4" data-name="pin" tooltip="f1ab"><p><i class="zmdi zmdi-pin zmdi-hc-fw"></i> zmdi-pin</p></div>

            <div class="col-sm-4" data-name="traffic" tooltip="f1e2"><p><i class="zmdi zmdi-traffic zmdi-hc-fw"></i> zmdi-traffic</p></div>

          </div>
        </div>
      </div>

      <div class="card icons-demo">
        <div class="card-header">
          <h2>View</h2>
        </div>

        <div class="card-body card-padding">
          <div class="row">

            <div class="col-sm-4" data-name="apps" tooltip="f313"><p><i class="zmdi zmdi-apps zmdi-hc-fw"></i> <span>apps</span></p></div>

            <div class="col-sm-4" data-name="grid-off" tooltip="f314"><p><i class="zmdi zmdi-grid-off zmdi-hc-fw"></i> <span>grid-off</span></p></div>

            <div class="col-sm-4" data-name="grid" tooltip="f315"><p><i class="zmdi zmdi-grid zmdi-hc-fw"></i> <span>grid</span></p></div>

            <div class="col-sm-4" data-name="view-agenda" tooltip="f316"><p><i class="zmdi zmdi-view-agenda zmdi-hc-fw"></i> <span>view-agenda</span></p></div>

            <div class="col-sm-4" data-name="view-array" tooltip="f317"><p><i class="zmdi zmdi-view-array zmdi-hc-fw"></i> <span>view-array</span></p></div>

            <div class="col-sm-4" data-name="view-carousel" tooltip="f318"><p><i class="zmdi zmdi-view-carousel zmdi-hc-fw"></i> <span>view-carousel</span></p></div>

            <div class="col-sm-4" data-name="view-column" tooltip="f319"><p><i class="zmdi zmdi-view-column zmdi-hc-fw"></i> <span>view-column</span></p></div>

            <div class="col-sm-4" data-name="view-comfy" tooltip="f31a"><p><i class="zmdi zmdi-view-comfy zmdi-hc-fw"></i> <span>view-comfy</span></p></div>

            <div class="col-sm-4" data-name="view-compact" tooltip="f31b"><p><i class="zmdi zmdi-view-compact zmdi-hc-fw"></i> <span>view-compact</span></p></div>

            <div class="col-sm-4" data-name="view-dashboard" tooltip="f31c"><p><i class="zmdi zmdi-view-dashboard zmdi-hc-fw"></i> <span>view-dashboard</span></p></div>

            <div class="col-sm-4" data-name="view-day" tooltip="f31d"><p><i class="zmdi zmdi-view-day zmdi-hc-fw"></i> <span>view-day</span></p></div>

            <div class="col-sm-4" data-name="view-headline" tooltip="f31e"><p><i class="zmdi zmdi-view-headline zmdi-hc-fw"></i> <span>view-headline</span></p></div>

            <div class="col-sm-4" data-name="view-list-alt" tooltip="f31f"><p><i class="zmdi zmdi-view-list-alt zmdi-hc-fw"></i> <span>view-list-alt</span></p></div>

            <div class="col-sm-4" data-name="view-list" tooltip="f320"><p><i class="zmdi zmdi-view-list zmdi-hc-fw"></i> <span>view-list</span></p></div>

            <div class="col-sm-4" data-name="view-module" tooltip="f321"><p><i class="zmdi zmdi-view-module zmdi-hc-fw"></i> <span>view-module</span></p></div>

            <div class="col-sm-4" data-name="view-quilt" tooltip="f322"><p><i class="zmdi zmdi-view-quilt zmdi-hc-fw"></i> <span>view-quilt</span></p></div>

            <div class="col-sm-4" data-name="view-stream" tooltip="f323"><p><i class="zmdi zmdi-view-stream zmdi-hc-fw"></i> <span>view-stream</span></p></div>

            <div class="col-sm-4" data-name="view-subtitles" tooltip="f324"><p><i class="zmdi zmdi-view-subtitles zmdi-hc-fw"></i> <span>view-subtitles</span></p></div>

            <div class="col-sm-4" data-name="view-toc" tooltip="f325"><p><i class="zmdi zmdi-view-toc zmdi-hc-fw"></i> <span>view-toc</span></p></div>

            <div class="col-sm-4" data-name="view-web" tooltip="f326"><p><i class="zmdi zmdi-view-web zmdi-hc-fw"></i> <span>view-web</span></p></div>

            <div class="col-sm-4" data-name="view-week" tooltip="f327"><p><i class="zmdi zmdi-view-week zmdi-hc-fw"></i> <span>view-week</span></p></div>

            <div class="col-sm-4" data-name="widgets" tooltip="f328"><p><i class="zmdi zmdi-widgets zmdi-hc-fw"></i> <span>widgets</span></p></div>

          </div>
        </div>
      </div>


      <div class="card icons-demo">
        <div class="card-header">
          <h2>Date / Time</h2>
        </div>

        <div class="card-body card-padding">
          <div class="row">

            <div class="col-sm-4" data-name="alarm-check" tooltip="f329"><p><i class="zmdi zmdi-alarm-check zmdi-hc-fw"></i> <span>alarm-check</span></p></div>

            <div class="col-sm-4" data-name="alarm-off" tooltip="f32a"><p><i class="zmdi zmdi-alarm-off zmdi-hc-fw"></i> <span>alarm-off</span></p></div>

            <div class="col-sm-4" data-name="alarm-plus" tooltip="f32b"><p><i class="zmdi zmdi-alarm-plus zmdi-hc-fw"></i> <span>alarm-plus</span></p></div>

            <div class="col-sm-4" data-name="alarm-snooze" tooltip="f32c"><p><i class="zmdi zmdi-alarm-snooze zmdi-hc-fw"></i> <span>alarm-snooze</span></p></div>

            <div class="col-sm-4" data-name="alarm" tooltip="f32d"><p><i class="zmdi zmdi-alarm zmdi-hc-fw"></i> <span>alarm</span></p></div>

            <div class="col-sm-4" data-name="calendar-alt" tooltip="f32e"><p><i class="zmdi zmdi-calendar-alt zmdi-hc-fw"></i> <span>calendar-alt</span></p></div>

            <div class="col-sm-4" data-name="calendar-check" tooltip="f32f"><p><i class="zmdi zmdi-calendar-check zmdi-hc-fw"></i> <span>calendar-check</span></p></div>

            <div class="col-sm-4" data-name="calendar-close" tooltip="f330"><p><i class="zmdi zmdi-calendar-close zmdi-hc-fw"></i> <span>calendar-close</span></p></div>

            <div class="col-sm-4" data-name="calendar-note" tooltip="f331"><p><i class="zmdi zmdi-calendar-note zmdi-hc-fw"></i> <span>calendar-note</span></p></div>

            <div class="col-sm-4" data-name="calendar" tooltip="f332"><p><i class="zmdi zmdi-calendar zmdi-hc-fw"></i> <span>calendar</span></p></div>

            <div class="col-sm-4" data-name="time-countdown" tooltip="f333"><p><i class="zmdi zmdi-time-countdown zmdi-hc-fw"></i> <span>time-countdown</span></p></div>

            <div class="col-sm-4" data-name="time-interval" tooltip="f334"><p><i class="zmdi zmdi-time-interval zmdi-hc-fw"></i> <span>time-interval</span></p></div>

            <div class="col-sm-4" data-name="time-restore-setting" tooltip="f335"><p><i class="zmdi zmdi-time-restore-setting zmdi-hc-fw"></i> <span>time-restore-setting</span></p></div>

            <div class="col-sm-4" data-name="time-restore" tooltip="f336"><p><i class="zmdi zmdi-time-restore zmdi-hc-fw"></i> <span>time-restore</span></p></div>

            <div class="col-sm-4" data-name="time" tooltip="f337"><p><i class="zmdi zmdi-time zmdi-hc-fw"></i> <span>time</span></p></div>

            <div class="col-sm-4" data-name="timer-off" tooltip="f338"><p><i class="zmdi zmdi-timer-off zmdi-hc-fw"></i> <span>timer-off</span></p></div>

            <div class="col-sm-4" data-name="timer" tooltip="f339"><p><i class="zmdi zmdi-timer zmdi-hc-fw"></i> <span>timer</span></p></div>

          </div>
        </div>
      </div>

      <div class="card icons-demo">
        <div class="card-header">
          <h2>Social</h2>
        </div>

        <div class="card-body card-padding">
          <div class="row">

            <div class="col-sm-4" data-name="android-alt" tooltip="f33a"><p><i class="zmdi zmdi-android-alt zmdi-hc-fw"></i> <span>android-alt</span></p></div>

            <div class="col-sm-4" data-name="android" tooltip="f33b"><p><i class="zmdi zmdi-android zmdi-hc-fw"></i> <span>android</span></p></div>

            <div class="col-sm-4" data-name="apple" tooltip="f33c"><p><i class="zmdi zmdi-apple zmdi-hc-fw"></i> <span>apple</span></p></div>

            <div class="col-sm-4" data-name="behance" tooltip="f33d"><p><i class="zmdi zmdi-behance zmdi-hc-fw"></i> <span>behance</span></p></div>

            <div class="col-sm-4" data-name="codepen" tooltip="f33e"><p><i class="zmdi zmdi-codepen zmdi-hc-fw"></i> <span>codepen</span></p></div>

            <div class="col-sm-4" data-name="dribbble" tooltip="f33f"><p><i class="zmdi zmdi-dribbble zmdi-hc-fw"></i> <span>dribbble</span></p></div>

            <div class="col-sm-4" data-name="dropbox" tooltip="f340"><p><i class="zmdi zmdi-dropbox zmdi-hc-fw"></i> <span>dropbox</span></p></div>

            <div class="col-sm-4" data-name="evernote" tooltip="f341"><p><i class="zmdi zmdi-evernote zmdi-hc-fw"></i> <span>evernote</span></p></div>

            <div class="col-sm-4" data-name="facebook-box" tooltip="f342"><p><i class="zmdi zmdi-facebook-box zmdi-hc-fw"></i> <span>facebook-box</span></p></div>

            <div class="col-sm-4" data-name="facebook" tooltip="f343"><p><i class="zmdi zmdi-facebook zmdi-hc-fw"></i> <span>facebook</span></p></div>

            <div class="col-sm-4" data-name="github-box" tooltip="f344"><p><i class="zmdi zmdi-github-box zmdi-hc-fw"></i> <span>github-box</span></p></div>

            <div class="col-sm-4" data-name="github" tooltip="f345"><p><i class="zmdi zmdi-github zmdi-hc-fw"></i> <span>github</span></p></div>

            <div class="col-sm-4" data-name="google-drive" tooltip="f346"><p><i class="zmdi zmdi-google-drive zmdi-hc-fw"></i> <span>google-drive</span></p></div>

            <div class="col-sm-4" data-name="google-earth" tooltip="f347"><p><i class="zmdi zmdi-google-earth zmdi-hc-fw"></i> <span>google-earth</span></p></div>

            <div class="col-sm-4" data-name="google-glass" tooltip="f348"><p><i class="zmdi zmdi-google-glass zmdi-hc-fw"></i> <span>google-glass</span></p></div>

            <div class="col-sm-4" data-name="google-maps" tooltip="f349"><p><i class="zmdi zmdi-google-maps zmdi-hc-fw"></i> <span>google-maps</span></p></div>

            <div class="col-sm-4" data-name="google-pages" tooltip="f34a"><p><i class="zmdi zmdi-google-pages zmdi-hc-fw"></i> <span>google-pages</span></p></div>

            <div class="col-sm-4" data-name="google-play" tooltip="f34b"><p><i class="zmdi zmdi-google-play zmdi-hc-fw"></i> <span>google-play</span></p></div>

            <div class="col-sm-4" data-name="google-plus-box" tooltip="f34c"><p><i class="zmdi zmdi-google-plus-box zmdi-hc-fw"></i> <span>google-plus-box</span></p></div>

            <div class="col-sm-4" data-name="google-plus" tooltip="f34d"><p><i class="zmdi zmdi-google-plus zmdi-hc-fw"></i> <span>google-plus</span></p></div>

            <div class="col-sm-4" data-name="google" tooltip="f34e"><p><i class="zmdi zmdi-google zmdi-hc-fw"></i> <span>google</span></p></div>

            <div class="col-sm-4" data-name="instagram" tooltip="f34f"><p><i class="zmdi zmdi-instagram zmdi-hc-fw"></i> <span>instagram</span></p></div>

            <div class="col-sm-4" data-name="language-css3" tooltip="f350"><p><i class="zmdi zmdi-language-css3 zmdi-hc-fw"></i> <span>language-css3</span></p></div>

            <div class="col-sm-4" data-name="language-html5" tooltip="f351"><p><i class="zmdi zmdi-language-html5 zmdi-hc-fw"></i> <span>language-html5</span></p></div>

            <div class="col-sm-4" data-name="language-javascript" tooltip="f352"><p><i class="zmdi zmdi-language-javascript zmdi-hc-fw"></i> <span>language-javascript</span></p></div>

            <div class="col-sm-4" data-name="language-python-alt" tooltip="f353"><p><i class="zmdi zmdi-language-python-alt zmdi-hc-fw"></i> <span>language-python-alt</span></p></div>

            <div class="col-sm-4" data-name="language-python" tooltip="f354"><p><i class="zmdi zmdi-language-python zmdi-hc-fw"></i> <span>language-python</span></p></div>

            <div class="col-sm-4" data-name="lastfm" tooltip="f355"><p><i class="zmdi zmdi-lastfm zmdi-hc-fw"></i> <span>lastfm</span></p></div>

            <div class="col-sm-4" data-name="linkedin-box" tooltip="f356"><p><i class="zmdi zmdi-linkedin-box zmdi-hc-fw"></i> <span>linkedin-box</span></p></div>

            <div class="col-sm-4" data-name="paypal" tooltip="f357"><p><i class="zmdi zmdi-paypal zmdi-hc-fw"></i> <span>paypal</span></p></div>

            <div class="col-sm-4" data-name="pinterest-box" tooltip="f358"><p><i class="zmdi zmdi-pinterest-box zmdi-hc-fw"></i> <span>pinterest-box</span></p></div>

            <div class="col-sm-4" data-name="pocket" tooltip="f359"><p><i class="zmdi zmdi-pocket zmdi-hc-fw"></i> <span>pocket</span></p></div>

            <div class="col-sm-4" data-name="polymer" tooltip="f35a"><p><i class="zmdi zmdi-polymer zmdi-hc-fw"></i> <span>polymer</span></p></div>

            <div class="col-sm-4" data-name="share" tooltip="f35b"><p><i class="zmdi zmdi-share zmdi-hc-fw"></i> <span>share</span></p></div>

            <div class="col-sm-4" data-name="stack-overflow" tooltip="f35c"><p><i class="zmdi zmdi-stack-overflow zmdi-hc-fw"></i> <span>stack-overflow</span></p></div>

            <div class="col-sm-4" data-name="steam-square" tooltip="f35d"><p><i class="zmdi zmdi-steam-square zmdi-hc-fw"></i> <span>steam-square</span></p></div>

            <div class="col-sm-4" data-name="steam" tooltip="f35e"><p><i class="zmdi zmdi-steam zmdi-hc-fw"></i> <span>steam</span></p></div>

            <div class="col-sm-4" data-name="twitter-box" tooltip="f35f"><p><i class="zmdi zmdi-twitter-box zmdi-hc-fw"></i> <span>twitter-box</span></p></div>

            <div class="col-sm-4" data-name="twitter" tooltip="f360"><p><i class="zmdi zmdi-twitter zmdi-hc-fw"></i> <span>twitter</span></p></div>

            <div class="col-sm-4" data-name="vk" tooltip="f361"><p><i class="zmdi zmdi-vk zmdi-hc-fw"></i> <span>vk</span></p></div>

            <div class="col-sm-4" data-name="wikipedia" tooltip="f362"><p><i class="zmdi zmdi-wikipedia zmdi-hc-fw"></i> <span>wikipedia</span></p></div>

            <div class="col-sm-4" data-name="windows" tooltip="f363"><p><i class="zmdi zmdi-windows zmdi-hc-fw"></i> <span>windows</span></p></div>

          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {}
</script>

<style lang="less" scoped>
  .card-body .zmdi {
    font-size: 23px;
    vertical-align: middle;
    color: #333;
    margin-right: 10px;
  }

  .card-body .col-sm-4 {
    padding: 0 7px;
  }

  .card-body .col-sm-4 p {
    padding: 8px;
    border-radius: 2px;
    margin-bottom: 0;
  }

  .card-body .col-sm-4 p:hover {
    background: #eee;
  }
</style>
